Example of JavaScript implementation of return to top effect-JS Tutorial-php.cn

Example of JavaScript implementation of return to top effect

黄舟

Release： 2017-11-16 16:30:04

Original

1512 people have browsed it

In our development work, JavaScript is an indispensable part. We often encounter code that uses JavaScript to return to the top. I believe that every page will have it. function, today I will give you a detailed introduction to the example of using JavaScript to achieve the return to the top effect!

Use native js to achieve a simple return to top effect. The requirements are relatively clear: 1. Show and hide buttons. 2. Trigger onscroll clearing again midwayTimer(Not implemented yet, hope you can enlighten me)

Code:

<!-- 
Time:2016.8.4
author:Joel

Dom操作
1.document.getElementById    根据ID获取标签元素
2.document.documentElement.scrollTop    .ie滚动条数值
3.document.body.scrollTop  .chrome
4.document.documentElement.clientHeight  可视区域高度

事件运用
1.window.onload  加载完毕触发事件
2.onclick  点击触发事件
3.window.scroll  滚动条触发事件

定时器
1.setInterval()
2.clearInterval() 
-->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btn:hover{
			background: blue;
		}
		.btn{
			display: none;
			height: 40px;
			width: 40px;
			background: red;
			position: fixed;
			left: 1410px;
			top: 600px;
		}
		.image{
			width: 1190px;
			margin:0 auto;
		}
	</style>
	<script type="text/javascript">
	      window.onload = function(){
		  var myBtn = document.getElementsByClassName("btn");
		  var clientHeight = document.documentElement.clientHeight;
          var timer = null;

		  window.onscroll = function(){
		  	var osTop = document.documentElement.scrollTop || document.body.scrollTop;

		  	if(osTop > clientHeight){
		  		myBtn[0].style.display = "block";
		  	}
		  	else{
		  		myBtn[0].style.display = "none";
		  	}
		    }
		    myBtn[0].onclick = function(){
		  	clearInterval(timer);
		  	timer = setInterval(function(){
              var osTop = document.documentElement.scrollTop || document.body.scrollTop;
              var spd = Math.floor((-osTop) / 1000);

              document.documentElement.scrollTop = osTop + spd;
              document.body.scrollTop = osTop + spd;

              if(osTop == 0){
              	clearInterval(timer);
              }
		  	},30);
		  }
	    }
	</script>
</head>
<body>
	<a href="javascript:;" class="btn">按钮</a> 
	<p class="image">
	  <img src="tb_bg.jpg" alt="">
	</p>
</body>
</html>

Copy after login

Summary:
1. The rendering order of dom stream, hover is written before a will take effect, otherwise it will be overwritten.

2. The use of various attribute methods and simple encapsulation.

3.getElementsByClassName returns nodelist, so use the form of array.

4. For compatibility issues under different browsers, abandon the dependency of the tab key and use two spaces instead.

5. Installation and use of emmet plug-in.

6. The animation provided by jq can more easily achieve the return to top effect. The anchor point method can also be used in certain situations. The problem is that some details will be displayed in the browser input field.

Related recommendations:

JS implementation Back to top Special effects

JS scroll event window.onscroll and position: fixed write a back to top component compatible with IE6

javascript - How to return the content of the iframe to the top outside the iframe

The above is the detailed content of Example of JavaScript implementation of return to top effect. For more information, please follow other related articles on the PHP Chinese website!