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（如果是这样，请您帮我编辑）？
我必须链接到外部jQuery文件才能实现此目的吗？

Answer 1

添加此脚本而不是您的脚本并在此处工作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，请参阅小提琴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帮助才能实现平滑滚动

2 个答案: