Javascript返回顶部代码实现

最新推荐文章于 2022-04-24 15:14:23 发布

最新推荐文章于 2022-04-24 15:14:23 发布 · 300 阅读

文章标签：

#javascript #返回顶部 #scrollTop #Chrome #compatMode #ViewUI

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何通过HTML、CSS和JavaScript实现网页返回顶部的功能，包括页面布局、样式设置和交互逻辑，旨在提升用户体验。同时，讨论了jQuery实现的便捷性和原生JavaScript的深入学习价值。

返回顶部逻辑很简单，功能点分为：

页面第一屏内不展示返回顶部的图标，超过第一屏时展示图标；
点击返回顶部图标时页面流畅地返回顶部。

HTML文件部分：

<!DOCTYPE html>
<html>
	<head>
		<title>返回顶部</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<p>向下拖动滚动条（进入第二屏），右下角会出现“返回顶部”图标</p>
		<img src="images/totop.png" id="toTop"/>
		<script style="text/javascript" src="js/lee_top.js"></script>
	</body>
</html>

CSS文件部分：

body{
	height:4000px;
}
#toTop{
	position:fixed;
	right:30px;
	bottom:40px;
	cursor:pointer;
	display:none;
}

PS：因为CSS部分用到了"fixed"，这个例子没有做IE6的兼容性处理（我相信大多数前端工程师都不喜欢IE6,），不过如果需要探讨此例的IE6兼容性,可以私信探讨^_^ 或者查看最新代码地址：https://github.com/tjuking/lee-goToTop

JS文件部分：

(function(){
	var scrollEle = clientEle = document.documentElement,
		toTopBtn = document.getElementById("toTop"),
		compatMode = document.compatMode,
		isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;
	//不同渲染模式以及Chrome的预处理
	if(compatMode === "BackCompat" || isChrome){
		scrollEle = document.body;
	}
	if(compatMode === "BackCompat"){
		clientEle = document.body;
	}
	//返回顶部按钮的点击响应（注册函数），时间间隔和高度缩减率可以调节
	toTopBtn.onclick = function(){
		var moveInterval = setInterval(moveScroll, 10);
		function moveScroll(){
			setScrollTop(getScrollTop() / 1.2);
			if(getScrollTop() === 0){
				clearInterval(moveInterval);
			}
		}
	}
	//滚动时判断是否显示返回顶部按钮（注册函数）
	window.onscroll = function(){
		var display = toTopBtn.style.display;
		if(getScrollTop() > getClientHeight()){
			if(display === "none" || display === ""){
				toTopBtn.style.display = "block";
			}
		}else{
			if(display === "block" || display === ""){
				toTopBtn.style.display = "none";
			}
		}
	}
	//获取和设置scrollTop
	function getScrollTop(){
		return scrollEle.scrollTop;
	}
	function setScrollTop(value){
		scrollEle.scrollTop = value;
	}
	//获取当前网页的展示高度（第一屏高度），此处Chrome正常
	function getClientHeight(){
		return clientEle.clientHeight;
	}
})();

如果返回顶部用jQuery实现需要考虑的东西就很少了，不过原生的Javascript能帮助我们更好的学习这门语言以及了解各浏览器的不同。

当然除了以上代码还需要去网上找一个漂亮的图标。