今天添加的功能是平滑滚动到指定位置,就是单击页面的按钮,平滑滚动页面到对应的元素,可添加偏移值。
示例:单击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>
上述代码单击“滚动到头部”按钮,将会平滑滚动到头部的位置;单击“滚动到指定位置”按钮,将会平滑滚动到指定位置。