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

最新推荐文章于 2025-06-04 16:43:59 发布

原创最新推荐文章于 2025-06-04 16:43:59 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一个使用jQuery实现的网页锚点跳转及自动显示隐藏侧边栏的示例。通过监听滚动事件来控制侧边栏的显示与隐藏，并实现页面元素之间的平滑滚动。同时介绍了如何设置侧边栏的位置。

<!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的兼容性

标签

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