本文主要是介绍html页面点击滑到到指定模块的楼梯效果和回到顶部，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
以下 demo 的代码直接粘贴下去实验一下就可看到效果
注：以下代码要引入 jquery，不过只是用了 jq 的查找功能，可随意替换成原生代码，很简单。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>louti</title><style>/*#menu{width:32px;height:360px;position:fixed;top:200px;left:0px;display: none;}*/#menu ul li{width:32px;height:32px;list-style-type:none;color:#8F8583;text-align:center;line-height: 32px;border-bottom:1px dotted #ddd;position:relative;}#menu ul li span{display:block;width:32px;height:32px;background:#C81623;position:absolute;top:0;left:0;color:#fff;font-size:12px;display: none;}#menu ul li:hover span{display:block; }#menu ul li span.active{color:#C81623;background:#fff;display:block;}#content{width:1220px;margin:0 auto;} #footer{width:1220px;height:600px;background:#FE7678;}.container{margin:0 auto;}</style>
</head>
<body><!-- 导航菜单 --><div id="menu"><ul><li>1F<span>服饰</span></li><li>2F<span>美妆</span></li><li>3F<span>手机</span></li><li>4F<span>家电</span></li><li>5F<span>数码</span></li></div><!-- 产品内容 --><div id="content"><img src="images/head.png" alt="" style="border:1px solid red;"><div class="louti" id="louti1"><img src="images/df_y04.jpg" alt=""></div><div class="louti" id="louti2"><img src="images/f2.png" alt=""></div><div class="louti" id="louti3"><img src="images/lx_08.png" alt=""></div><div class="louti" id="louti4"><img src="images/case_03.jpg" alt=""></div><div class="louti" id="louti5"><img src="images/f5.png" alt=""></div></div>
</body>
<script src="jquery.js"></script>
<script>$(function(){var _index=0;$("#menu ul li").click(function(){_index=$(this).index()+1;//通过拼接字符串获取元素，再取得相对于文档的高度var _top=$("#louti"+_index).offset().top;//scrollTop滚动到对应高度$("body,html").animate({scrollTop:_top},500);});// 以下注释的部分是 对楼梯点击后的处理，看情况而定// var nav=$("#menu"); //得到导航对象// var win=$(window); //得到窗口对象// var sc=$(document);//得到document文档对象。// win.scroll(function(){// if(sc.scrollTop()>=600){// $("#menu").show(); // //获取滚动元素对应的索引!!!重难点// var index=Math.floor(sc.scrollTop()/600);// $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");// }else{// $("#menu").hide();// }// });// 滚动到页面顶部$('#toTop').click(function(){$("body,html").animate({scrollTop:0},500);})});
</script>
</html>
这篇关于html页面点击滑到到指定模块的楼梯效果和回到顶部的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
