需要 JavaScript 帮助才能流畅滚动

Question

我的论坛中有一个可用的 "go to top" 按钮。我选择使用以下代码，因为它不会以任何方式改变我论坛的 URL，这一点很重要。在 head 部分中：

<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="" />

它运行良好，让我的 URL 保持干净。我的问题：

能否编辑我的 JavaScript 以允许平滑滚动到 div ID（如果可以，请您帮我进行编辑）？
我必须 link 到外部 jQuery 文件才能实现此目的吗？

Answer 1

添加此脚本而不是您的脚本并在此处 fiddle 工作 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>

Answer 2

所以尽量简单，这里用的是JQuery，见fiddle http://jsfiddle.net/aq9ptz0L/2/

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

请注意，如果您还没有 JQuery，请在 <head> 部分添加此内容：

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

需要 JavaScript 帮助才能流畅滚动

Need JavaScript help for smooth scrolling

javascript

anchor

scroll