zoukankan      html  css  js  c++  java
  • 一行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;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div id="greenid" style="height:200px;300px;background-color:green;margin:20px" tabindex="4"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;300px;background-color:red;margin:20px"></div>
    <div style="height:200px;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所以不存在这个问题)。

  • 相关阅读:
    测试次数--蓝桥杯
    承压计算--蓝桥杯
    天梯赛--连续因子
    等差素数数列-蓝桥杯
    hdu-1237-简单计算器
    hdu-1022-栈
    [BZOJ3172]:[Tjoi2013]单词(AC自动机)
    [BZOJ4327]:[JZOI2012]玄武密码(AC自动机)
    [HDU5360]:Gorgeous Sequence(小清新线段树)
    [BZOJ3307]:雨天的尾巴(LCA+树上差分+权值线段树)
  • 原文地址:https://www.cnblogs.com/jimaww/p/10007433.html
Copyright © 2011-2022 走看看