js simple click return to top effect implementation method

js simple click return to top effect implementation method_javascript skills

WBOY

Release： 2016-05-16 16:05:04

Original

1427 people have browsed it

The example in this article describes how to implement the js simple click-to-return-to-top effect. Share it with everyone for your reference. The specific analysis is as follows:

When the page is particularly long and the user wants to return to the top of the page, he must scroll several times to return to the top. If there is a "Return to Top" button in the lower right corner of the page, the user can click it to return to the top. Going to the top is a better experience for users.

Implementation principle: When the page loads, position the element to the lower right corner of the page. When the page scrolls, the element will always be in the lower right corner. When the user clicks, the page returns to the top.

Point 1: document.documentElement.clientWidth || document.body.clientWidth; Get the width of the visual area. The back is compatible with chrome, and the front is compatible with other browsers.

Point 2: oTop.style.left = screenw - oTop.offsetWidth "px"; When the page loads, position the element at the far right of the page and subtract the element from the width of the visual area The width of itself.

Point three: oTop.style.top = screenh - oTop.offsetHeight scrolltop "px"; When the page scrolls, the Y coordinate position of the element is equal to the height of the visual area minus the height of the element itself , plus the scroll distance.

Point 4: document.documentElement.scrollTop = document.body.scrollTop =0; When the element is clicked, let the scrolling distance of the page be 0. Write two for compatibility.

Above code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 var screenw = document.documentElement.clientWidth || document.body.clientWidth;
 var screenh = document.documentElement.clientHeight || document.body.clientHeight;
 oTop.style.left = screenw - oTop.offsetWidth +"px";
 oTop.style.top = screenh - oTop.offsetHeight + "px";
 window.onscroll = function(){
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
 }
 oTop.onclick = function(){
  document.documentElement.scrollTop = document.body.scrollTop =0;
 }
} 
</script>
</head>
<body style="height:1000px;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.