回到顶部效果

Bertha 。 2021-10-19 11:36 458阅读 0赞

### 锚链接 ###

优点：

*  简单快速、没有兼容性问题

缺点：

*  视觉上不够直观，用户体验不够好

### 用JavaScript制作回到顶部效果 ###

*  当滚动条滚动一定距离的时候，页面就出现回到顶部的图标
 *  点击按钮滚动条滚动到顶部

**主要知识点**

DOM操作：

1.  document.getElementById                          根据ID获取标签元素
2.  document.documentElement.scrollTop       滚动条的数值，可读写

事件运用：

1.  window.onload           页面加载完毕后触发
2.  onclick                        点击后触发
3.  window.onscroll          滚动条滚动时触发

定时器：

1.  setInterval()          设置定时器，需传2个参数
2.  clearInterval()       关闭定时器，需传1个参数

### 用HTML + CSS实现页面布局 ###

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>Javascript 返回顶部</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    	<div class="bg">
    		<img src="images/bg1.jpg" alt="" />
    		<img src="images/bg2.jpg" alt="" />
    		<img src="images/bg3.jpg" alt="" />
    		<img src="images/bg4.jpg" alt="" />
    		<img src="images/bg5.jpg" alt="" />
    		<img src="images/bg6.jpg" alt="" />
    		<img src="images/bg7.jpg" alt="" />
    	</div>
    	<a href="javascript:;" id="btn" title="回到顶部"></a>
    </body>
    </html>

style.css:

body {
    	margin-top: 15px;
    	background-color: #f0f0f0;
    }
    .bg{
    	width:1190px;margin:0 auto;
    }
    .bg img {
    	width: 100%;
    	display: block;
    	margin-bottom: 15px;
    	-moz-box-shadow:0px 0px 10px #000005; -webkit-box-shadow:0px 0px 10px #000005; box-shadow:0px 0px 10px #000005;
    }
    #btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; background:url(images/top_bg.png) no-repeat left top;}
    #btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

script.js:

// 页面加载完毕后触发
    window.onload = function () {
    	var obtn = document.getElementById('btn');
    	// 获取页面可视区的高度
    	var clientHeight = document.documentElement.clientHeight;
    	var timer = null
    	var isTop = true
    
    	// 滚动条滚动时触发
    	window.onscroll = function () {
    		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    		if(osTop >= clientHeight) {
    			obtn.style.display = 'block'
    		} else {
    			obtn.style.display = 'none'
    		}
    		if(!isTop) {
    			clearInterval(timer);
    		}
    		isTop = false
    	}
    
    	obtn.onclick = function(){
    		// 设置定时器
    		timer = setInterval(function () {
    			// 获取滚动条距离顶部的高度
    			var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    			var ispeed = Math.floor( -osTop / 6 );
    			document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    			
    			isTop = true
    			console.log(osTop)
    			if(osTop === 0) {
    				clearInterval(timer);
    			}
    		},30);
    	}
    }