Home > Article > Web Front-end > js simple click return to top effect implementation method_javascript skills

js simple click return to top effect implementation method_javascript skills

WBOYOriginal: 2016-05-16 16:05:041395browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js simple method to realize left and right click movement_javascript skillsNext article：js simple method to realize left and right click movement_javascript skills

See more

js simple click return to top effect implementation method_javascript skills

Related articles