Question

我想用javascript创建一个“返回顶部”按钮。当我点击按钮没有任何反应时，我的代码（我在StackOverflow上找到）不起作用。

HTML

     <button type="button" id="backtotop_js">To the top</button>

JAVASCRIPT

     document.getElementById('backtotop_js').onclick = function () {
        scrollTo(document.documentElement, 0, 1250);
     };
     function scrollTo(element, to, duration) {
         var start = element.scrollTop,
             change = to - start,
             currentTime = 0,
             increment = 20;

         var animateScroll = function(){        
             currentTime += increment;
             var val = Math.easeInOutQuad(currentTime, start, change, duration);
             element.scrollTop = val;
             if(currentTime < duration) {
                 setTimeout(animateScroll, increment);
             }
         };
         animateScroll();
     }

     Math.easeInOutQuad = function (t, b, c, d) {
        t /= d/2;
        if(t < 1) 
           return c/2*t*t + b;
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
     };

（我正在使用Chrome和Firefox）

哪里出错？

Answer 1

在vanilla JS

中将滚动设置为无顶动画

document.getElementById('backtotop_js').onclick = function () {    
    document.documentElement.scrollTop = 0;
}

编辑：根据Rudie的评论，将document.getElementsByTagName（'body'）[0]更改为document.documentElement。

Answer 2

定义和使用（document.document.Element）

documentElement属性返回文档的documentElement，作为Element对象。

对于HTML文档，返回的对象是HTML元素。

注意：如果缺少HTML元素，则返回值为null。

http://www.w3schools.com/jsref/prop_document_documentelement.asp

你应该滚动而不是html元素，而是滚动身体......正如vikton给出了一个例子。

没有jQuery的回到顶部按钮

2 个答案: