结合锚点利用滚动条监听跳转

每一个锚点都相当于一个完整的模块，正好占满一个屏幕，滚动可以直接跳转锚点，

<body><!--头部开始--><div id="header"><div id="hlogo"><div id="hlogo1">家维网</div><span id="hlogot">让家居服务更简单</span></div><div id="hzhan"></div><div id="hnav"><div id="hnavtop"><div class="hnt">地图</div>    <div class="hnt">注册</div>    <div class="hnt">登录</div>    </div><div id="hnavbuttom"><div class="hnb">首页</div><div class="hnb">解决方案</div><div class="hnb">专业维修</div><div class="hnb">共享服务</div><div class="hnb">知识分享</div><div class="hnb">关于我们</div></div></div></div><!--头部结束--><!--内容开始--><div id="zhuti"><div id="maodian"><a href="#a1"><div class="md"></div></a><a href="#a2"><div class="md"></div></a><a href="#a3"><div class="md"></div></a><a href="#a4"><div class="md"></div></a></div><a name="a1"></a><div id="ztn1"></div><a name="a2"></a><div id="ztn2"></div><a name="a3"></a><div id="ztn3"></div><a name="a4"></a><div id="ztn4"></div></div><div id="footer"></div>
</body>

View Code

css样式：

*{ margin:0 auto;padding:0;}
body{background-color:#999;}
#yemei{width:100%;height:20px;background-image:url(../images/bg.png);}
/*头部开始*/
#header{width:100%;height:120px;position:fixed;top:0px;background-color:#000;opacity:0.7;-moz-opacity:0.7;}
#hlogo{width:200px;height:120px;margin-left:50px;float:left;}
#hlogo1{width:170px;height:100px;background-image:url(../images/logo2.png);background-repeat:no-repeat;background-position:25px;line-height:120px;font-size:30px;color:#fff;text-align:right;}
#hlogot{color:#fff;line-height:20px;font-size:16px;position:relative;top:-10px;left:45px;}
#hzhan{width:400px;height:100%;float:left;}
#hnav{width:600px;height:100%;float:left;}
#hnavtop{width:100%;height:40px;}
.hnt{width:40px;height:100%;line-height:40px;color:#fff;text-align:center;float:right;margin-right:15px;}
#hnavbuttom{width:100%;height:80px;}
.hnb{width:100px;height:100%;line-height:80px;color:#fff;text-align:center;float:left;font-size:18px;}
/*头部结束*/
/*内容开始*/
#zhuti{width:100%;height:2648px;background-color:#CCC;}
#maodian{ width:50px; height: 300px; position:fixed; right:10px; top:150px;}
.md{ width:30px; height:30px; border-radius:50%; background-color:#fff; margin-bottom:10px;}
#ztn1{ width:100%; height:662px; background-color:#00F;}
#ztn2{ width:100%; height:662px; background-color:#f00;}
#ztn3{ width:100%; height:662px; background-color:#0f0;}
#ztn4{ width:100%; height:662px; background-color:#f60;}
/*内容结束*/
#footer{width:100%;height:120px;background-image:url(../images/bg1-.png);}
#yejiao{width:100%;height:20px;background-image:url(../images/bg.png);}

View Code

js:

var ztn1 = document.getElementById("ztn1");var ztn2 = document.getElementById("ztn2");var ztn3 = document.getElementById("ztn3");var ztn4 = document.getElementById("ztn4");var md = document.getElementsByClassName("md");window.onscroll = function(){var sry = window.scrollY;if(sry<10 && sry>1){window.scroll(0,662);}if(sry<662 && sry>642){window.scroll(0,0);}if(sry<682 && sry>662){window.scroll(0,1324);}if(sry<1324 && sry>1304){window.scroll(0,662);}if(sry<1344 && sry>1324){window.scroll(0,1986);}if(sry<1986 && sry>1966){window.scroll(0,1324);}}

View Code

转载于:https://www.cnblogs.com/zxbs12345/p/8034801.html

结合锚点利用滚动条监听跳转相关推荐

原生js监听滚动条_原生JS实现滚动条监听
本文主要利用原生的javascript实现滚动条事件的监听,主要涉及的知识: (1)利用React组件渲染一个UI页面 (2)实现锚点链接 (3)实现滚动条onscroll事件其中,利用React渲 ...
html 页面跳转监听,如何监听跳转页面执行结果?
是这样的列表页all_list.html具有下拉刷新和下拉加载功能,并且正常. 列表页全是我利用 mui('#uuu').on('tap', 'a', function(e) { var car_i ...
html页面滚动条监听事件,滚动条的scroll事件
在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同.用法不同.侧重点不同一.指代不同 scroll:滚屏,滚动. change:变更,变革. ...
利用select监听stdin输入
我这两天打算研究一下vi的源码(就是linux上面的那个vi),然后在这个学期的课程设计中写一个简单的文本编辑器.我发现vi源码中是利用select来监听是否有输入内容的. 文件描述符我们都知道li ...
html页面滚动条监听事件,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
Android监听WebView网页跳转,webview怎么监听跳转到二级页面啊？
onReady() { // #ifdef APP-PLUS var currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview ...
android 卸载广播,Android利用系统广播---监听应用程序安装和卸载
在android系统中,安装和卸载都会发送广播,当应用安装完成后系统会发android.intent.action.PACKAGE_ADDED广播.可以通过intent.getDataString() ...
java利用canal监听数据库
springcloud如何使用canal监听mysql数据库操作 canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费,目前主要支持了MySQ ...

结合锚点利用滚动条监听跳转

结合锚点利用滚动条监听跳转相关推荐

最新文章

热门文章