欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jq实现锚点跳转过度

程序员文章站 2022-08-17 09:47:04
jq实现锚点跳转过渡例子:当我们浏览页面想回到页面顶部时,点击按钮会回到想要去到的锚点。1、数据内容(html)
  • .........

jq实现锚点跳转过渡

例子:当我们浏览页面想回到页面顶部时,点击按钮会回到想要去到的锚点。

1、数据内容(html)

<div id = "content">
    <button onclick = "jumpToEx()">跳转</button>
    <div class = "demoOne">
        <ul>
           <li></li>
            ......
        </ul>
    </div>
    // 测试的位置
    <div id = "demoTwo">

    </div>
    <div class = "demothree">
        <ul>
            <li></li>
            ......
        </ul>
    </div>
</div>

2、jq运用scrollTop来实现

<script>
   // 立即执行函数
    $(function(){
        $("html,body").animate({
            scrollTop : 0
        }, 1000);
    })
    // 点击跳转
    function jumpToEx(){
        $("html,body").animate({
            scrollTop : $('#demoTwo').offset().top
        }, 1000);
    }
</script>

问题:在框架之中怎么使用?浏览了一下说是vue可以用scrollIntoView()

本文地址:https://blog.csdn.net/jinchunye/article/details/109356194