JQ 最少代码实现返回顶部功能

最新推荐文章于 2022-07-09 11:37:28 发布

最新推荐文章于 2022-07-09 11:37:28 发布 · 129 阅读

文章标签：

#JQ 返回顶部功能 #JQ 最少代码实现

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了两种实现网页中回顶部按钮的方法。一种是通过jQuery的点击事件来平滑滚动到页面顶部；另一种则是利用带有固定定位的锚点链接实现相同效果。这两种方式简单实用，适合快速开发。

偶写的代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<style>
#goTop{ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; 
color: #fff; position: fixed; bottom: 20px; right: 20px;}
</style>
<div style="height: 3000px;"></div>
<div id="goTop">回到顶部</div>
<script>
$(function(){
	goTop();
});
function goTop(){
	$('#goTop').click(function(){$('html,body').animate({scrollTop: '0'}, 800);});
}
</script>
</body>
</html>

效果图：

结果群友（贾顺名）直接写出使用#号的解决方法：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="base.css" />
</head>
<body>
<style>
.goTop{ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; 
color: #fff; position: fixed; bottom: 20px; right: 20px;}
</style>
<script>document.write('<p>some text</p>'.repeat(200));</script>
<a href="#top" class="goTop">回到顶部</a>
</body>
</html>

效果图：