连续循环页面(不是无限滚动)

Question

我正在寻找创建滚动功能的资源,例如在这些网站上找到的功能:
Outpost Journal
Unfold

滚动条点击页面底部后,我希望它循环回到顶部.我对无限卷轴很熟悉,这不是我想要的.我还发现脚本会将相同的内容写入/添加到页面底部,但没有一个循环回到页面顶部.

Answer 1

试试这个:

   $('document').ready(function() {
             $(document).scroll(function(){
             if(document.documentElement.clientHeight + 
             $(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
             });
          }); 

Answer 2

这里有一个复制身体的解决方案,因此可以在某一点同时看到底部和顶部,因此过渡更平滑.

$('document').ready(function() {

     // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
     var origDocHeight = document.body.offsetHeight;

     // now we know the height we can duplicate the body    
     $("body").contents().clone().appendTo("body");


     $(document).scroll(function(){ // detect scrolling

         var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled

         if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
             $(document).scrollTop(0); // then scroll to the top
         }       
     });

 }); 

Answer 3

如果你想在两个方向上无限滚动使用

if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
    $(document).scrollTop(0)
} else if ($(window).scrollTop() < 0) {
    $(document).scrollTop($(document).height())
}

(我知道这是一个迟到的回复,但它仍然帮助像我这样的谷歌这样的用户)

Answer 4

mrida的答案导致我的浏览器无法滚动,这是一个适合我的修改版本:

  $('document').ready(function() {
    $(document).scroll(function(){
      if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
        $(document).scrollTop(0);
      }
    });
  });