javascript - OnePage 向下滚动按钮

Question

在这个页面上: http://www.petertoth.me/stuff/petertoth_old/www.petertoth.me/index.html
有一个向下滚动按钮，可以平滑地向下滚动到“下一页”。任何人都知道它是预制的 jQuery 插件还是修改后的插件？我已经研究了很长时间，发现可以用这种方法或多或少地模仿这个:

var scrolled=0;    
$(document).ready(function(){                
    $("#downClick").on("click" ,function(){
      scrolled=scrolled+100;

      $("html, body").animate({
              scrollTop:  scrolled
         });  
    });

});  

或

$('#gdb1').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 600);
return false;});

http://jsfiddle.net/uw1hdkaf/20/
但很高兴知道如何使用 jQuery 或不使用它来正确制作它!

Answer 1

您需要考虑的因素是，元素需要具有您想要向下滚动的确切高度。看看这个例子:http://jsfiddle.net/uw1hdkaf/22/

p {
    height: 100px;
    margin: 0;
}

段落标记的边距设置为 16px，因此您需要将其删除。基本上使所有元素中的每个元素完全为 0。

如果您将高度设置为 100 像素并使用您的脚本向下滚动 100 像素，它会保证向下滚动到下一个元素，只要您确保元素与您设置的高度完全一样。