网站建设商城模板,长沙武广新城建设网站,想要学做网站需要什么,wordpress边栏时间接着上一篇#xff0c;其实是一个功能#xff0c;本来感觉挺简单的一个问题#xff0c;没想到遇到两个坎儿#xff0c;无语。。。 上一篇是关于scroll事件绑定的问题#xff0c;这一篇的问题是#xff1a;点击锚点跳转到相应DIV的问题。 最简单的方法是锚点用a标… 接着上一篇其实是一个功能本来感觉挺简单的一个问题没想到遇到两个坎儿无语。。。 上一篇是关于scroll事件绑定的问题这一篇的问题是点击锚点跳转到相应DIV的问题。 最简单的方法是锚点用a标签在href属性中写入DIV的id。如下 !DOCTYPE htmlhtmlhead style div { height: 800px; width: 400px; border: 2px solid black; } h2 { position: fixed; margin:50px 500px; } /style/headbody h2 a href#div1to div1/a a href#div2to div2/a a href#div3to div3/a /h2 div iddiv1div1/div div iddiv2div2/div div iddiv3div3/div/body/html 这种方法的缺点是点击锚点之后浏览器的URL会发生变化如果刷新可能会出现问题。 第二种方式是在js事件中通过window.location.hashdivId跳转但地址也会发生变化感觉跟第一种方法没区别甚至更麻烦。 第三种方法是用animate属性当点击锚点后页面滚动到相应的DIV。接着上面的代码具体添加如下代码 script typetext/javascript srchttp://code.jquery.com/jquery-1.8.0.min.js/script
script typetext/javascript$(document).ready(function() { $(#div1Link).click(function() { $(html, body).animate({ scrollTop: $(#div1).offset().top }, {duration: 500,easing: swing}); return false; }); $(#div2Link).click(function() { $(html, body).animate({ scrollTop: $(#div2).offset().top }, {duration: 500,easing: swing}); return false; }); $(#div3Link).click(function() { $(html, body).animate({ scrollTop: $(#div3).offset().top }, {duration: 500,easing: swing}); return false; });}); /script 注意运行上面的脚本的之前先将为锚点增加相应的id同时去掉href属性。 $(html, body)可以替换为响应的div如果不起作用试着给该div增加overflowscroll属性。 另外脚本可以进一步优化自己来试试 这样做的好处是URL地址不会变同时点击锚点时会自动响应scroll事件不需要重新绑定。 缺点是如果页面复杂的话偏移值可能会发生变化需要算法辅助。 第四种方法是用js的srollIntoView方法直接用: document.getElementById(divId).scrollIntoView();这种方法的好处是URL不会变同时能够响应相应的scroll事件不需要算法什么的。 推介大家用第四种我依次试了前三种都有各种问题可能是页面较复杂的缘故吧当然技术不咋也是。。。 转载于:https://www.cnblogs.com/ictlight-moving-on-1/p/5753785.html
