Loops 连续循环页面（非无限滚动）

我正在寻找创建滚动功能的资源，如这些网站上的滚动功能：

一旦滚动条到达页面底部，我希望它循环回到顶部。 我熟悉无限卷轴，这不是我想要的。我还发现一些脚本可以将相同的内容写入/添加到页面底部，但没有一个脚本可以循环回页面顶部。

尝试以下方法：

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

---

mrida的回答导致我的浏览器无法滚动，下面是一个对我有效的修改版本：

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

---

如果您想要在两个方向上无限滚动，请使用

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

if（document.documentElement.clientHeight+$（window.scrollTop（）>=$（document.height（））{
$（文档）.scrollTop（0）
}else if（$（窗口）.scrollTop（）<0）{
$（文档）.scrollTop（$（文档）.height（））
}

---

（我知道这是一个很晚的回复，但它仍然可以帮助像我这样的用户在谷歌上搜索类似的东西）

这里有一个解决方案，它可以复制身体，这样底部和顶部可以在某个点同时看到，这样过渡就更平滑了

$('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
         }       
     });

 }); 

---

添加循环向后滚动，升级@clankill3r answer。应该是这样的

$('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(scrollWindowPos + origDocHeight); // then scroll to the top
     } else if (scrollWindowPos == 0) { // if we scrolled backwards
         $(document).scrollTop(origDocHeight);
     }
 });
});

---

我水平使用它，它工作得很好。希望有人觉得它有用。

根据@clangkill3r的答案，创建两个正文副本，在原始正文前加上前缀和附加，然后您可以向两个方向滚动页面

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

    var origDocHeight = document.body.offsetHeight;

    var clone=$("body").contents().clone();
    clone.appendTo("body");
    clone.prependTo("body");

    $(document).scroll(function(){ 

        var scrollWindowPos = $(document).scrollTop(); 

        if(scrollWindowPos >= origDocHeight ) { 
            $(document).scrollTop(0); 
        }
        if(scrollWindowPos <= 0 ) { 
             $(document).scrollTop(origDocHeight); 
         }        
    });
});

$（'document'）.ready（函数（）{
var origDocHeight=document.body.offsetHeight；
var clone=$（“body”）.contents（）.clone（）；
克隆。附体（“身体”）；
克隆。前本托（“身体”）；
$（文档）。滚动（函数（）{
var scrollWindowPos=$（文档）.scrollTop（）；
如果（scrollWindowPos>=原点）{
$（文档）.scrollTop（0）；
}
if（scrollWindowPos发布了一个类似的问题：并通过这支笔找到了答案：

代码如下：

<style>

html,
body {
  height: 100%;
  overflow: hidden;
}
  
.infinite {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.clone {
  height: 50vw;
}
  
</style>

<script>

    var doc = window.document,
    context = doc.querySelector('.infinite'),
    clones = context.querySelectorAll('.clone'),
    disableScroll = false,
    scrollHeight = 0,
    scrollPos = 0,
    clonesHeight = 0,
    i = 0;

    function getScrollPos () {
      return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
    }

    function setScrollPos (pos) {
      context.scrollTop = pos;
    }

    function getClonesHeight () {
      clonesHeight = 0;

      for (i = 0; i < clones.length; i += 1) {
        clonesHeight = clonesHeight + clones[i].offsetHeight;
      }

      return clonesHeight;
    }

    function reCalc () {
      scrollPos = getScrollPos();
      scrollHeight = context.scrollHeight;
      clonesHeight = getClonesHeight();

      if (scrollPos <= 0) {
        setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
      }
    }

    function scrollUpdate () {
      if (!disableScroll) {
        scrollPos = getScrollPos();

        if (clonesHeight + scrollPos >= scrollHeight) {
          // Scroll to the top when you’ve reached the bottom
          setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
          disableScroll = true;
        } else if (scrollPos <= 0) {
          // Scroll to the bottom when you reach the top
          setScrollPos(scrollHeight - clonesHeight);
          disableScroll = true;
        }
      }

      if (disableScroll) {
        // Disable scroll-jumping for a short time to avoid flickering
        window.setTimeout(function () {
          disableScroll = false;
        }, 40);
      }
    }

    function init () {
      reCalc();

      context.addEventListener('scroll', function () {
        window.requestAnimationFrame(scrollUpdate);
      }, false);

      window.addEventListener('resize', function () {
        window.requestAnimationFrame(reCalc);
      }, false);
    }

    if (document.readyState !== 'loading') {
      init()
    } else {
      doc.addEventListener('DOMContentLoaded', init, false)
    }

</script>


html，
身体{
身高：100%；
溢出：隐藏；
}
.无限{
溢出：自动；
-webkit溢出滚动：触摸；
}
.克隆{
高度：50vw；
}
var doc=window.document，
context=doc.querySelector（'.infinite'），
克隆=context.querySelectorAll（'.clone'），
disableScroll=false，
滚动高度=0，
scrollPos=0，
克隆高度=0，
i=0；
函数getScrollPos（）{
返回（context.pageYOffset | | | context.scrollTop）-（context.clientTop | | 0）；
}
功能设置CROLLPOS（pos）{
context.scrollTop=pos；
}
函数getClonesHeight（）{
克隆高度=0；
对于（i=0；i<0.length；i+=1）{
clonesHeight=clonesHeight+clones[i]。视线外；
}
返回克隆高度；
}
函数reCalc（）{
scrollPos=getScrollPos（）；
scrollHeight=context.scrollHeight；
clonesHeight=getClonesHeight（）；
如果（滚动位置=滚动高度）{
//到达底部后滚动到顶部
setScrollPos（1）；//向下滚动1个像素以允许向上滚动
disableScroll=true；
}else if（scrollPos）只要将滚动位置设置为0，它就位于页面底部。您的代码对我不起作用，因此我通过
else if（$（窗口）。scrollTop（）<0）
更改了此部分
else if（$（窗口）。scrollTop（）<1）