Question

我的页面顶部有一个全屏图片。主要内容就在图像之下。我的目标是当用户开始滚动页面时，页面直接滚动到主要内容。比如this website

我应该如何使用jQuery实现这一目标？

Answer 1

以Fiddle为例：

$(window).scroll(function(){
   $('html,body').animate({
    scrollTop: $(".down").offset().top},
    'slow');
});

并添加了第二个Fiddle，因为第一个问题是使用此方法无法离开底部。虽然保留在特定内容中可能会很好，但第二种只能滚动一次：

var lastScrollTop = 0;
$(window).scroll(function (event) {
  var currentScroll = $(this).scrollTop();
  if (currentScroll > lastScrollTop && 
       $(".down").data("visible") === "no") {
    $(".down").data("visible", "yes");

    $('html,body').animate({
        scrollTop: $(".down").offset().top
    },
        'slow');

  } else {
    // upscrolling could be handled here
  }
  lastScrollTop = currentScroll;
});

使用示例HTML：

<div class="top>">scroll down</div>
<div class="down" data-visible="no">here we are</div>

因此可以使用例如设置/取消设置特定的强制滚动。 div上的数据属性。

当用户开始滚动页面时，如何将页面直接强制转换为主要内容？

1 个答案: