javascript - Back to top button without jQuery - Stack Overflow

admin管理员组

文章数量:1415484

I want to create a button "Back to top" with javascript. My code (which I found on StackOverflow) does not work when I click the button nothing happens.

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;
     };

(I'm using Chrome and Firefox)

Where's the mistake?

I want to create a button "Back to top" with javascript. My code (which I found on StackOverflow) does not work when I click the button nothing happens.

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;
     };

(I'm using Chrome and Firefox)

Where's the mistake?

• javascript
• jquery

Share Improve this question Follow edited Feb 9, 2014 at 14:18 brasofilo 26.1k1515 gold badges9494 silver badges186186 bronze badges asked Feb 9, 2014 at 14:10 user3287827user3287827 4

• scrollTo is a plicated process, only use it if you are intending to scroll a specific element. But if you want to scroll to top, just go to position 0. – Mohammed Joraid Commented Feb 9, 2014 at 14:17
• 1 window already has a method scrollTo. You probably shouldn't call your own function that. – Rudie Commented Feb 9, 2014 at 14:20
• 2 Personally, I would use an old school anchor, no JS or anything. <a id="#header">Go To Top</a>. If must use JS just put -> window.scrollTo(0,0); – Mohammed Joraid Commented Feb 9, 2014 at 14:22
• @Rudie Sorry but I did not understand what I have to correct .. – user3287827 Commented Feb 9, 2014 at 14:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Will make the scroll to top without animation in vanilla JS

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

EDIT: changed document.getElementsByTagName('body')[0] to document.documentElement as per Rudie's ment below.

Definition and Usage (of document.document.Element)

The documentElement property returns the documentElement of a document, as an Element object.

For HTML documents the returned object is the HTML element.

Note: If the HTML element is missing, the return value is null.

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

you shoud scroll not the html element but instead the body... as vikton was giving an example.

本文标签： javascriptBack to top button without jQueryStack Overflow