location.hash

最新推荐文章于 2023-03-28 11:14:20 发布

automation13

最新推荐文章于 2023-03-28 11:14:20 发布

阅读量177

点赞数

分类专栏： Web前端文章标签：前端 html

本文链接：https://blog.csdn.net/automation13/article/details/78696126

版权

Web前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.创建HTML文件，命名为test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body >
        <div id="test1" style="height:1500px; width:100%;background-color:brown"></div>
        <div id="test2" style="height:1500px; width:100%;background-color:blue"></div>
        <div id="test3" style="height:1500px; width:100%;background-color:green;overflow-x:auto">
            <div style="height:100%; width:2000px">
                <div id="test30" style="display:inline-block;height:100%;width:500px;background-color:red"></div><!--
                --><div id="test31" style="display:inline-block;height:100%;width:500px;background-color:yellow"></div><!--
                --><div id="test32" style="display:inline-block;height:100%;width:500px;background-color:gray"></div><!--
                --><div id="test33" style="display:inline-block;height:100%;width:500px;background-color:black"></div>
            </div>
        </div>
    </body>
</html>

注：
(1)使用“display:inline-block”布局会发现每两个div标签在浏览器中展示时中间有缝隙，这个缝隙就是代码中的换行符，如果要消除可以不换行，不过代码可读性变差，所以换行时将空注释分成了两行来增加代码可读性其实还有其他的方法，可以百度“display inline-block 间隙”
(2)overflow-x属性即使为hidden也不影响根据id的值进行

2.在浏览器中打开创建的HTML文件

（1）file:///Users/example/HTML/test.html

（2）file:///Users/example/HTML/test.html#test1

（3）file:///Users/example/HTML/test.html#test30

（4）file:///Users/example/HTML/test.html#test33

注意看#后边的值引起的页面滚动，这些值对应HTML文件中的id值，其实使用<a>标签的锚点也是可以的，在此未举例

3.上面的改变要不定位到了页面的最顶端，要不定位到页面最右端，怎么改变这个定位的位置呢？

提供思路：因为改变location.hash值会触发onhashchange事件，我们可以在此事件内通过js代码改变定位的位置，可以考虑scrollIntoView函数