今天添加的功能是平滑滚动到指定位置,就是单击页面的按钮,平滑滚动页面到对应的元素,可添加偏移值。
示例:单击ID为gundongBTN 元素,页面平滑滚动到其指定的ID为#topdiv对应内容,同时保留 5px 的偏移间距。
myth("#gundongBTN").scrollTo("#topdiv",5);
一、Javascript关键代码如下:
// 平滑滚动scrollTo: function(el, offset) { this.click(function() {var objectEL = myth(el); var top=objectEL.dom[0].offsetTop - offset;"scrollBehavior" in document.documentElement.style ? globalThis.scrollTo({top: top,left: 0,behavior: "smooth"}) : globalThis.scrollTo(0, top);}); },
说明:这段代码是加到我们以前js框架myth.js中的,想看完整结构请单击下载。这是以前的代码,加到里面即可。
二、HTML代码如下:
<div class="mythBox mid"><br/><div id="topdiv" style="background-color: coral;">头部</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="middleDiv" style="background-color: coral;">指定位置</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><button class="btn blue small" id="gundongBTN">滚动到头部</button> <button class="btn blue small" id="middleBTN">滚动到指定位置</button></div> <script type="text/javascript"> myth("#gundongBTN").scrollTo("#topdiv",5); myth("#middleBTN").scrollTo("#middleDiv",5); </script>
上述代码单击“滚动到头部”按钮,将会平滑滚动到头部的位置;单击“滚动到指定位置”按钮,将会平滑滚动到指定位置。