首页 前端知识 4种方法实现html 页面内锚点定位及跳转

4种方法实现html 页面内锚点定位及跳转

2024-03-07 08:03:08 前端知识 前端哥 575 139 我要收藏

使用scrollIntoView进行锚点定位效果

不知道你有没有遇到这样的需求:锚点定位?进入页面某个元素需要出现在可视区?…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴,实现的方式有各种各样的,比如使用 scrollTop、监听滚动等等,这也是很多小伙伴第一个想到的。 今天我们介绍一种更简单的方式:scrollIntoView。


项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点,然后你点击给一次后退都是退回上一个选择的锚点url,这里我总结4个跳转锚点的方法。

a标签进行定位

  • 也是最简单的方法是锚点用标签,在href属性中写入div的id
<style>  
    div {  
        height: 800px;  
        width: 400px;  
        border: 2px solid black;  
    }  
    h2 {  
        position: fixed;  
        margin:50px 500px;  
    }  
</style>  
  
  
<h2>  
    <a href="#div1">to div1</a>  
    <a href="#div2">to div2</a>  
    <a href="#div3">to div3</a>  
</h2>  
    <div id="div1">div1</div>  
    <div id="div2">div2</div>  
    <div id="div3">div3</div>  

这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。


js事件

window.location.hash="divId"

跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦


利用animate属性

是用animate属性,当点击锚点后,页面滚动到相应的DIV。

$(document).ready(function() {
    $("#div1Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
            return false;
    });
    $("#div2Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#div3Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
});
代码我没验证这段来自-》》》》》
作者:Flutter错误集
链接:https://juejin.cn/post/6908965295109603335
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

srollIntoView方法

  • scrollIntoView 是 HTMLElement 集合下的一个 API,每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样:滚动到可视区。 为了更加官方一点,我们还是先来看看官方的解释。
  • 官方解释:Element 接口的 scrollIntoView()方法会滚动元素的父容器,使被调用 scrollIntoView()的元素对用户可见。
  • 官方的解释还是比较好理解的,我们摘要几个关键词出来:
    • Element 接口
    • 滚动
    • 可见
    从上我们大致也能理解,无非就是让某一个元素对用户可见,但是为了更准确又通俗一点,我们用自己的话简单概述一遍。
    scrollIntoView()是 HTML 元素的一个方法,假如我们有一个元素容器出现了滚动条,有滚动条必然就有一些元素是不可见的,为了让隐藏的元素可见,我们可以手动滚动滚动条,让元素出现,另一种方法就是调用隐藏元素的 scrollIntoView 方法,让它自动滚动到可视区内。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数
参数解释:
• alignToTop:它是一个 Boolean 值,它用来规定元素出现在可视区后与可视区的对齐方式,为 true 代表顶端对齐,false 代表低端对齐。
• scrollIntoViewOptions:它是一个对象,该参数主要是配置元素的动画效果以及位置的,它有以下 3 个属性:
• behavior:它定义元素出现在可视区内过程的动画,有 auto 和 smooth 两种选择。
• block:定义元素的垂直方向的对齐方式,有"start", "center", "end","nearest" 4 个选项,默认 start。
• inline:定义元素水平对齐方式,有"start", "center", "end","nearest"4 个选项,默认"nearest"`在这里插入代码片`
注意:
有些小伙伴可能发现两个参数都能定义元素的对齐方式,它们之间有什么联系呢?当 alignToTop 为 true 时,scrollIntoViewOptions: {block: "start", inline: "nearest"}这是它的默认值,当 alignToTop 为 false 时,scrollIntoViewOptions: {block: "end", inline: "nearest"}这是它的默认值。
<html>
    <head>
        <title>HTML5_ScrollInToView方法</title>
        <meta  charset="utf-8">
        <style type="text/css">
            #myDiv{
                /* height:900px; */
                height: 50px;
                background-color:gray;
                overflow-y: scroll;
            }
            #roll_top{
                height:50px;
                background-color:green;
                color:#FFF;
                font-size:20px;
                position:relative;
            }
            #bottom{
                /* position:absolute; */
                display:block;
                left:0;
                bottom:0;
            }
        </style>
    </head>
    <body>
        <button id="roll1">scrollIntoView(false)</button>
        <button id="roll2">scrollIntoView(true)</button>
        <div id="myDiv">
          <div id="roll_top">scrollIntoView(ture)元素上边框与视窗顶部齐平</div> 
          <div id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</div>
        </div>
       
    </body>
    <script>
      window.onload = function(){
    document.querySelector("#roll1").onclick = function(){
        document.querySelector("#roll_top").scrollIntoView(false);
    }
    document.querySelector("#roll2").onclick = function(){
        document.querySelector("#bottom").scrollIntoView(true);
    }
}
    </script>
</html>

如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素
会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部
不一定齐平,例如:
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3377.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!