jquery锚点跳转+自动显示隐藏回到顶端代码

最新推荐文章于 2021-04-26 23:23:44 发布

260kk

最新推荐文章于 2021-04-26 23:23:44 发布

阅读量2.1k

点赞数 1

分类专栏： js 文章标签： jquery 锚点跳转自动显示隐藏回到顶端代码

本文链接：https://blog.csdn.net/bzxcl/article/details/51576791

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery锚点跳转+自动显示隐藏回到顶端代码</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.gddh{ width:80px; height:100px; position:fixed; background-color:#06C; right:0px; display:none; }
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$(".gddh").css("top",($(window).height()-$(".gddh").height())/2);<!--设置侧导航条的垂直位置 居中-->
$(document).scroll(function(){
if($(document).scrollTop()>200){$(".gddh").css("display","block")}else{$(".gddh").css("display","none")};
})<!--控制侧导航条的显示和隐藏  200侧导航隐藏时的滚动距离-->
$("#m1").click(function(){$("html,body").animate({scrollTop: $("#p1").offset().top}, 1000);});
$("#m2").click(function(){$("html,body").animate({scrollTop: $("#p2").offset().top}, 1000);});
$("#m3").click(function(){$("html,body").animate({scrollTop: $("#p3").offset().top}, 1000);});
$("#ys").click(function(){$("html,body").animate({scrollTop:0}, 1000);});
$("#yw").click(function(){$("html,body").animate({scrollTop:($(document).height())}, 1000);});
});
</script>
<body> 
<!--侧导航-->
<div class="gddh" ><a id="ys">回到页首</a>  <br><br>   <a id="yw">回到页尾</a></div>

<!--导航-->
<a  id="m1">1111</a>  <a id="m2">2222</a>  <a  id="m3">3333</a>


<h2 id="p1">1111</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>

<h2 id="p2">2222</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2 id="p3">3333</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

注意：animate的兼容性