css自学框架之平滑滚动

今天添加的功能是平滑滚动到指定位置，就是单击页面的按钮，平滑滚动页面到对应的元素，可添加偏移值。
示例：单击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>

上述代码单击“滚动到头部”按钮，将会平滑滚动到头部的位置；单击“滚动到指定位置”按钮，将会平滑滚动到指定位置。