javascript - 点击时响应式滑动

Question

你们已经帮了我很多忙，我希望你们能帮我解决这个问题。

这是我到目前为止的网站:http://stilld.nl/test/

一切都工作得很好(不过需要在我的代码中进行大量整理)。

请向下滚动到作品集部分。单击一个项目，详细信息将显示在投资组合下方。完美的!

问题:将浏览器尺寸缩小到移动格式。单击投资组合项目。它向下滚动得不够远，因为我的投资组合项目现在显示在彼此下方。它们现在占据了更多的垂直空间!

我想要什么:有没有办法让代码响应？就像这样:如果屏幕尺寸小于 600 像素，则单击时向下滑动 500 像素。

这是我现在正在使用的代码:

$(document).ready(function(){
$(".portfolio").click(function () {
    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
    }

});
$(".close").click(function () {
    $('.description').slideUp();        
    $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});

});

Answer 1

您应该使用 jQuery 的 .offset() 来计算 offset或 jQuery 的 .position() .

例如，您可以做的是:

$(".portfolio").click(function () {    

    var offSetTarget = $('.description').position().top;
    var scrollExtra = 0;

    $('body').animate({
        scrollTop: offSetTarget + scrollExtra

    }, 600);
});

您可以在其中确定要滚动多少额外。

例如，如果您想滚动到 .portfolio 上方，则可以添加: scrollExtra = -10; 。或者，如果您想滚动一半，您可以这样做: scrollExtra = $('.portfolio').height()/2;

我为你准备了一个工作示例HERE .

为了证明它确实有效，您可以调整窗口大小 here .

我希望这能回答您的问题。祝你好运!

更新

要将其实现到您的示例中，我们必须确定滚动到哪里。

出于说明目的，我在本例中选择使用 div #alldescriptions 和 #port_img1 来执行此操作。

您网站的 jQuery 将是:

$(document).ready(function() {
  $(".portfolio").click(function () {

    var offSetTarget = $('#alldescriptions').position().top;
    var scrollExtra = 0;

    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
    }

  });
  $(".close").click(function () {
      $('.description').slideUp();        
      $('body').animate({scrollTop: $('#port_img1').position().top }, 600);
  });
});

再次提醒您，您可以通过为 varscrollExtra 指定不同的值来更改确切的滚动位置。

您可以找到此代码的实现 here和一个实时全屏示例 here 。

请再次尝试一下窗口大小，以便您可以看到它实际上适用于每种屏幕尺寸。祝你好运!