如何做一個平穩向下滾動頁面的JavaScript

-2

function scrollWin() { 
 
    setInterval(function(){ for(var i = 0; i < 1250; i++){ 
 
    window.scrollTo(0, i);} }, 3); 
 
    
 
    }

li { 
 
    float: left; 
 
    list-style: none; 
 
    margin: 10px; 
 
} 
 
.reset { 
 
    clear: both; 
 
} 
 
div { 
 
    width: 500px; 
 
    height: 600px; 
 
    background-color: blue; 
 
    margin: 20px; 
 
}

<ul> 
 
    <li><a href="#"></a>Home</li> 
 
    <li><button onclick="scrollWin()"></a>about</button> 
 
    
 
    <li><a href="#"></a>profile</li> 
 
    <li><a href="#"></a>contact</li> 
 
</ul> 
 
<div class="reset"></div> 
 
<section> 
 
    <div id="home1"></div> 
 
    <div id="about1">About</div> 
 
    <div id="profile1"></div> 
 
    <div id="contact"></div> 
 
</section>

所以我嘗試讓for循環加1的高度每次循環，這將使一個高度畫面下降。在很短的時間內使用時間間隔，我相信這會使頁面平滑向下滾動。

來源

2016-01-29 Nevelle

我們會需要更多。 – Phix

事實上，我不認爲你知道你在這裏問什麼。 JQuery已經有了一個滾動方法，jQuery Easing使得它更加有趣。嘗試之前，讓自己的。 –

我不認爲你理解JavaScript中異步編程的本質。請參閱下面的答案，並在此處閱讀更多關於JavaScript的內容：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop –

我正在寫一個PHP示例代碼，如果循環第二次運行時出現滾動條，就像你問我希望的問題。所以先定義一個變量，然後如下增加它在你的循環：

<?php 
$i=1; 
for(condition;condition;condition){ 
    //your code here 
    $i++; 
} 

if($i<1){ 
echo '<script> 
     $(".yourdivclass").css("overflow","scroll"); 
     </script>'; 
} 
?>

來源

2016-01-29 04:59:45

Javascript代碼應執行好聽你的要求。我有一個小提琴，我已經設置爲一個使用示例。請檢查出來，如果您有任何問題，請告訴我。

https://jsfiddle.net/6gp7srfr/1/

function smoothScroll(x, y) { 
    var b = document.body; 
    var xIncrement = 1; 
    var yIncrement = 1; 
    var scrollY = function() { 
     yIncrement += 1; 
     window.scroll(b.scrollLeft, b.scrollTop + yIncrement); 
     if (b.scrollTop < y) { 
      if (requestAnimationFrame) { 
       requestAnimationFrame(scrollY); 
      } else { 
       setTimeout(scrollY, 15); 
      } 
     } 
    }; 
    var scrollX = function() { 
     xIncrement += 1; 
     window.scroll(b.scrollLeft + xIncrement, b.scrollTop); 
     if (b.scrollLeft < x) { 
      if (requestAnimationFrame) { 
       requestAnimationFrame(scrollX); 
      } else { 
       setTimeout(scrollX, 15); 
      } 
     } 
    }; 
    if (y > 0) { 
     scrollY(); 
    } 
    if (x > 0) { 
     scrollX(); 
    } 
}

來源

2016-01-29 05:13:26

如何做一個平穩向下滾動頁面的JavaScript

回答

相關問題