html页面点击滑到到指定模块的楼梯效果和回到顶部

最新推荐文章于 2021-06-20 04:53:54 发布

BetterGG

最新推荐文章于 2021-06-20 04:53:54 发布

阅读量750

点赞数

分类专栏： js 文章标签： html楼梯滑动回到顶部

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

以下 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>

BetterGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html页面点击滑到到指定模块的楼梯效果和回到顶部

以下 demo 的代码直接粘贴下去实验一下就可看到效果注：以下代码要引入 jquery，不过只是用了 jq 的查找功能，可随意替换成原生代码，很简单。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;louti&lt
复制链接

扫一扫