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

这篇具有很好参考价值的文章主要介绍了4种方法实现html 页面内锚点定位及跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用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.toymoban.com/news/detail-672915.html

到了这里,关于4种方法实现html 页面内锚点定位及跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端页面跳转的3种方法(HTML示例)

    一、onclick跳转 1. 设置window的location.href属性 2. 调用window的open方法 二、a标签跳转

    2024年02月11日
    浏览(70)
  • HTML实现登录后跳转到指定页面,不回退

    最近开发页面,需要实现登录功能,成功后跳转到指定页面,之前尝试了好几种页面被跳转方法,但是都失败了,好在最终成功跳转,且浏览器不会后退,所以来记录一下: 最开始我使用的是window.location.href=\\\" http://localhost:8080 \\\",虽然能成功跳转到指定页面,但是点击浏览器回

    2024年02月12日
    浏览(65)
  • html+js实现输入用户名和密码点击登录跳转页面

    html+js实现: 输入用户名和密码点击登录跳转其他页面 这里主页是index.html 跳转的页面名字是随机点名.html 1.index.html  2.随机点名.html

    2024年02月11日
    浏览(46)
  • 实现锚点定位功能(React/Vue)

    最近接到一个需求,修改某某页面,增加XXX功能,并实现个锚点功能。做产品就是不断优化,增加功能的过程。实现锚点的方式很多, 很多UI库也提供了组件,可以根据自己的需求调整一下组件库也可以实现,也可以用 a href=\\\"XX\\\" / 标签实现,还可以基于 scrollIntoView api实现。

    2024年01月22日
    浏览(38)
  • 【vue3】锚点定位(两种实现方式)

    说到锚点定位,很多人第一时间会想到 a标签。但是a标签实现的锚点定位并不是那么的完美,特别是在hash模式下。 对我而言,vue3的ref就实在是太完美了。 很多情况下,我们会循环一定格式的数据对页面进行渲染,然后再有锚点定位的需求。那么我们该怎么去做呢? 1. setu

    2024年02月16日
    浏览(42)
  • uniapp 实现切换tab锚点定位到指定位置

    1.主要使用uniapp scroll-view 组件的scroll-into-view属性实现功能 2.代码如下

    2024年02月11日
    浏览(44)
  • css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现

    实现效果: html代码: 给要跳转的dom元素id赋值即可。 css: js:

    2024年02月12日
    浏览(38)
  • 小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

    Uniapp支持锚点连接,可以通过以下步骤实现锚点连接 一、在需要设置锚点的页面,为需要跳转的部分设置id属性。 例如,设置一个id为“section1”的元素: 二、在需要跳转到锚点的页面,使用 uni.navigateTo 或 uni.redirectTo 方法,搭配URL参数的方式实现跳转。 例如,跳转到id为“

    2024年02月14日
    浏览(59)
  • JS 实现页面跳转的几种方法

    我总结了这五种方法: 第一种:使用JS跳转页面 (1)跳转带参 (2)跳转无参 第二种:返回上一次预览界面 HTML页面嵌套 第三种:button按钮添加事件跳转   第四种:在新窗口打开 第五种:通过meta设置跳转页面 这里还有一个页面传值 第一个页面 第二个页面

    2024年02月01日
    浏览(45)
  • 帝国CMS表单提交跳转到指定页面的实现方法

    帝国CMS提交后经常会默认进入指定的页面,下面提供的教程无需改文件。 直接再登陆表单加这个: 放在表单 内即可。

    2024年02月03日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包