1

JavaScript Back to Top Link

 2 years ago
source link: http://siongui.github.io/2012/06/27/javascript-back-to-top-link/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JavaScript Back to Top Link

Updated: April 06, 2015

To add a "back to top" link is very easy, just add one line of code in the HTML document (from [1]):

<a href="#" onclick="window.scrollTo(0,0); return false">Back to Top</a>

The above code is "staic", what if I want to dynamically create a "back to top" link?

It seems pretty easy, so I wrote the following code:

var backToTop = document.createElement("a");
backToTop.href = "#";
backToTop.onclick = "window.scrollTo(0,0); return false;";
backToTop.innerHTML = "Back to Top";

// append backToTop to some element...

This looks exactly the same as above, but actually not. The correct way to write "dynamic" version of "back to top" link should be:

var backToTop = document.createElement("a");
backToTop.href = "#";
backToTop.onclick = function(e){window.scrollTo(0,0);return false;};
backToTop.innerHTML = "Back to Top";

// append backToTop to some element...

Look at the difference closely again:

Wrong:

backToTop.onclick = "window.scrollTo(0,0); return false;";

Right:

backToTop.onclick = function(e){window.scrollTo(0,0);return false;};

If you do it the wrong way as I originally did, once the link is clicked, users will be re-directed to "#" before the window is scrolled to top! That means "return default;" does not prevent the default action of the onclick event. This conclusion comes from my trial and error, and I don't know the syntax differences of the two versions.

There is another way to create "back to top" link dynamically:

var backToTop = document.createElement("a");
backToTop.href = "javascript:window.scrollTo(0,0);";
backToTop.innerHTML = "Back to Top";

// append backToTop to some element...

The above code assigns JavaScript command directly to the href property. However, I don't know whether this is good practice for coding or not. I still put the code here for references.

Reference:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK