一行JS实现滚动到页面某个元素所在位置(类似JQ ScrollTo插件)

在实现滚动到页面指定位置时一般使用的都是JQuery的ScrollTo插件( 具体可见：ScrollTo：平滑滚动到页面指定位置 )

但是我们也可以使用几行原生js实现此功能：

打开此页面：http://www.runoob.com/try/try.php?filename=tryjsref_html_blur

那么在输入这几行代码就可以啦:

<!DOCTYPE HTML>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div id="greenid" style="height:200px;width:300px;background-color:green;margin:20px" tabindex="4"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<div style="height:200px;width:300px;background-color:red;margin:20px"></div>
<a href="http://www.runoob.com//" tabindex="2"> runoob.com 菜鸟教程</a><br />
<a id="focusid" href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

</body>
<script>
document.querySelector('#greenid').focus();
//document.querySelector('#focusid').focus();
</script>

原理：利用tabindex和focus，因为focus只能聚焦在input，button，a之类可聚焦的标签上，所以要给div加上tabindex使其可以被focus。

注意：如果元素已经被focus了那么再次focus不会触发滚动条滚动至此元素，记得在再次触发滚动到此focus元素之前先blur即可（demo是两个元素来回focus所以不存在这个问题）。

export const inToView = (id: string) => {
  const ele: any = id && document.querySelector(`#${id}`);
  if (ele) {
    ele.setAttribute('tabindex', '1');
    ele.focus();
    ele.style.outline = 'none'; // 解决IE边框问题
  }
}

 

posted @ 2018-11-23 14:32  jim520  阅读(13107)  评论(1)  编辑  收藏  举报