如何在用户开始滚动页面时强制页面直接显示主内容？

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> 

所以具体的强制卷轴可以设置/取消使用例如数据属性的divs。