需要JavaScript幫助平滑滾動

我在我的論壇中有一個「go to top」按鈕。我選擇了以下代碼，因爲它不會以任何方式更改論壇的URL，這非常重要。內head部分：需要JavaScript幫助平滑滾動

<script> 
    function scrollWindow() { 
    var top = document.getElementById('goHere').scrollTop; 
    window.scrollTo(0, top); 
    } 
</script>

身體我想去內的DIV：

<div id="goHere"></div>

輸入：

<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />

它的功能很好，離開我的網址乾淨。我的問題：

可我的JavaScript進行編輯，以允許平滑滾動到div ID（如果有的話，請你幫我編輯）？
我必須鏈接到外部jQuery文件才能實現此目的嗎？

來源

2016-06-30 Izzy-B

所以，在這裏它使用JQuery使其儘可能簡單，看小提琴http://jsfiddle.net/aq9ptz0L/2/

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#goHere").offset().top 
    }, 2000); 
});

請注意，在<head>部分，如果您還沒有JQuery，請添加此項：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

來源

2016-06-30 22:12:28

哇，這太棒了！工作得很好，我的PHP很滿意，非常感謝！謝謝你，SaiKiran，爲你的工作，以及:) –

這是可能的，我應用順利滾動整個我的網站？我的意思是當用戶轉動鼠標的滾動按鈕*（或者改變頁面的滾動條）*時，我想要一個平滑的滾動。 – stack

是的，但它會是一個完全不同的方法，雖然 –

添加這個腳本，而不是你的腳本，並在這裏工作的小提琴Link

!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}}); 

function scrollWindow() { 
    var top = document.getElementById('goHere'); 
    window.smoothScroll(top) 
} 

</script>

來源

2016-06-30 20:47:43

我正在測試腳本。但是，我忘記提及我的文件是PHP，所以我不得不反斜削一些引號，以便恢復我的頁面。 –

「我的JS可以編輯，以允許平滑滾動到div ID」 - 您的代碼滾動到頂部，而不是'

' –

感謝您的支持！我會再嘗試。它被頭部中的回聲聲明所捕獲（這是我原來的JS所在的地方，所以引號打破了頁面。） –

需要JavaScript幫助平滑滾動

回答

相關問題