回到顶部的实现方式

最新推荐文章于 2023-11-12 19:12:34 发布

食仁魔法师

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量843

点赞数

分类专栏： web前端文章标签： jquery BackToTop 回到顶部

本文链接：https://blog.csdn.net/fun913510024/article/details/38795583

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

做一个回到顶部有多种方式

1、使用<a>标签

在顶部写一个<a name="top"></a>

然后再需要回到顶部的地方加一个<a href="#top">back to top</a>

2、使用滚动条的滚动方式

$("#rTop").click(function(){
window.scrollTo(0,0);
});

给个实例：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jqueryBacktotop</title> 
    <script src="../statics/scripts/jquery-1.8.2.min.js"></script><!-- 注意修改引用路径 -->
    <style>
.rTop{ width:43px; height:50px;text-align:center; font-size:14px; line-height:25px; border:1px solid #999; position:fixed; right:126px; bottom:110px;
border-bottom-color:#333; border-right-color:#333; margin:5px; cursor:pointer; display:none}
</style>
</head> 
<script language="javascript"> 
　　$(function(){

　　   $("#rTop").click(function(){
				window.scrollTo(0,0);
		});
		
		$(document).scroll( function() { 
				//回到顶部
			if($(this).scrollTop()>0){// 滚屏距离大于某个值时处理
    			$('#rTop').css('display','block');
     		}else{
        		$('#rTop').css('display','none');
    		}
    	});
　　});
</script> 
<body> 
<div style="height:2000px;">
<h3>测试返回顶部</h3>
</div>
<div class="rTop" id="rTop">返回顶部</div>
</body> 
</html>