1. 首頁
  2. 問答
  3. 自動滾動到頁面底部，然後頂部並重復

自動滾動到頁面底部，然後頂部並重復

2012-09-18 158 views
4

我創建了一個儀表板，它可以回顯所有行，但我想要一個自動滾動，它將緩慢向下滾動頁面底部，然後緩慢滾動回到頂部並重復。我GOOGLE了這個，不能得到一個工作代碼。我一直在尋找jQuery代碼，但任何事情都會做。自動滾動到頁面底部，然後頂部並重復

因爲頁面會調整所有的時間它不能有固定的高度滾動。

不確定您是否需要更多信息，但如果您需要更新此問題。

問候 開局

來源

2012-09-18 TheGambit

+1

向我們展示你已經嘗試過的代碼。 – Lowkase

+0

試着只是自動滾動到頁面的底部，但沒有奏效。函數pageScroll（）{ window.scrollBy（0,1）; scrolldelay = setTimeout（'pageScroll（）'，10）; } – TheGambit

+0

請參閱下面的回答，使用animate函數的回調函數可以讓您有兩個方法彼此來回調用，以便它可以反覆向上和向下滾動。 – CaffGeek

回答

8

你可以使用這樣的事情。

//run instantly and then goes after (setTimeout interval) 

    $("html, body").animate({ scrollTop: $(document).height() }, 4000); 
    setTimeout(function() { 
     $('html, body').animate({scrollTop:0}, 4000); 
    },4000); 
    var scrolltopbottom = setInterval(function(){ 
     // 4000 - it will take 4 secound in total from the top of the page to the bottom 
    $("html, body").animate({ scrollTop: $(document).height() }, 4000); 
    setTimeout(function() { 
     $('html, body').animate({scrollTop:0}, 4000); 
    },4000); 

    },8000); 

​//Use this to stop the scroller -> clearInterval(scrolltopbottom);

例子： http://jsfiddle.net/NaP8D/11/

來源

2012-09-18 13:16:29 TimTastic

+0

這有效，但是如何降低滾動速度時的速度？ – TheGambit

+0

@TheGambit如果我正確理解你，你需要在動畫方法中使用easing。您需要將其從線性改爲其他。包括jQuery的用戶界面的一些替代品：http://jqueryui.com/demos/effect/easing.html – Johan

+0

編輯看看我的更新帖子。 只需將「4000」值增加或減少到任何您想要的速度和間隔。 – TimTastic

1

這裏，這應該工作良好，只是改變5000的時間以毫秒爲單位調整速度。

http://jsfiddle.net/BDc6S/3/

function scrollDown(el) { 
    el.animate({ 
     scrollTop: el[0].scrollHeight 
    }, 5000, function() { 
     scrollUp(el) 
    }); 
}; 

function scrollUp(el) { 
    el.animate({ 
     scrollTop: 0 
    }, 5000, function() { 
     scrollDown(el); 
    }); 
}; 

scrollDown($("html,body"));​

來源

2012-09-18 13:28:30 CaffGeek

+0

停止和開始滾動似乎增加每個循環。 – dbd

0 
function doSomething() { 
    $(document).scrollTop($(document).height()); 
} 
setInterval(doSomething, 5000);

這將滾動到每5秒在頁面底部。如果你有基於用戶滾動像Facebook一樣的自動加載內容，這將是有用的。

來源

2015-12-10 16:58:53 FreeBird

1

你應該試試這個更好的結果

//run instantly and then goes after (setTimeout interval) 
 

 
$("html, body").animate({ scrollTop: $(document).height() }, 4000); 
 

 
setTimeout(function() { 
 
    $('html, body').animate({scrollTop:0}, 4000); 
 
},4000); 
 

 

 
setInterval(function(){ 
 
    // 4000 - it will take 4 secound in total from the top of the page to the bottom 
 
$("html, body").animate({ scrollTop: $(document).height() }, 4000); 
 
setTimeout(function() { 
 
    $('html, body').animate({scrollTop:0}, 4000); 
 
},4000); 
 
    
 
},8000); 
 

 

 
$('html, body').mouseover(function(e) { 
 
$(this).stop(true); 
 
     
 
    }).mouseout(function() { 
 
     $(this).stop(false); 
 
    }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div style="height:2000px; float:left; width:100%;"> 
 
Text text 
 
Text text 
 
    Text text 
 
    
 
    Text text 
 
    Text text 
 
    Text text 
 
    Text text 
 
    
 
    
 
    
 
    Text text 
 
    Text textv 
 
    Text text 
 
    Text text 
 
    
 
    Text text 
 
    Text textText text 
 
    Text textText text Text textText text 
 
     Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p>Text textText text 
 
    <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> 
 
     <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> <p> 
 
      Text textText text Text textText text Text textText text Text textText text Text textText text 
 
     </p> 
 
    
 

 
</div>

http://jsfiddle.net/neelu/gvvnd0tt/8/

來源

2017-04-12 08:51:31

相關問題

 相關問題