返回顶部按钮代码，指定滚动高度多少时显示[代码在线演示]

手机浏览点“运行”后往下扒拉，看结果！

<!doctype html>
<html lang="zh-CN">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<title>bootstrap返回顶部按钮演示-dfbazhu.com</title>
<style>
.gotop {
	position: fixed !important;
	bottom: 10%;
	z-index: 1200;
	font-size: .75rem;
	text-decoration: none;
	display: none;
	padding: .2rem .3rem;
	background: rgba(139, 139, 139, 0.44);
	color: #fff;
}
.gotop:hover, .gotop:active {
	background: #007bff !important;
	color: #fff !important;
	text-decoration: none;
	border: none;
}
/*返回顶部end*/
</style>
</head>

<body style="height:1200px">
<p>请将代码拷贝到本地电脑上测试！</p>
<p>因为本演示是在iframe框架中，所以点击返回时有问题</p>
<p>注意script要放在jQuery的后面加载！</p>
	
<div class="container-lg pr-5">
  <div class="float-right"><a class="gotop rounded border" href="javascript:scroll(0,0)">返回<br>
    顶部</a> </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script> 
<script>//该script要放在引用jQuery代码代码的后面
function rightBar() {
    $(window).scroll(function () {
        var scroll_top = $(document).scrollTop();
        console.log(scroll_top)
        if (scroll_top > 230) {//当向下滚动230px时,出现返回顶部链接
            $(".gotop").show(300);
        } else {
            $(".gotop").hide(300);
        }
    });
	//$(".gallery").click(function () {
	//$("html,body").animate({scrollTop:0}, 500);//500表示回顶部的时间，500毫秒，不需要设置为0或删除；设置了页面会缓慢滚动到顶部
	//});
}
rightBar();
</script>
</body>
</html>

返回顶部按钮代码，指定滚动高度多少时显示

时间:2020-11-30 13:21:22 来源:巅峰霸主网作者:烈火大地点击: 次

摘要：不限制jQuery版本，任何版本的jQuery都可以使用，此返回顶部按钮代码任何网站均通用，包括bootstrap框架。可以指定当滚动条向下滚动多高时显示按钮！需要注意的是：script代码要放在jQuery代码……

不限制jQuery版本，任何版本的jQuery都可以使用，此返回顶部按钮代码任何网站均通用，包括bootstrap框架。可以指定当滚动条向下滚动多高时显示按钮！

需要注意的是：script代码要放在jQuery代码的后面加载，否则效果出不来；css部分主要使用了bootstrap的代码，如果没有使用bootstrap可以自己修改一下css就能用；如果你使用的是bootstrap，那么直接使用即可。

(责任编辑：陆柏熺)