1861资源网:您身边、安全、高速、放心的专业下载站!
手机站 软件专题
1861资源网
热门搜索: 请搜索 软件: 相关信息 请输入 相关: 软件 软件 穿书后她与反派大佬相互娇养 抖音极速版2022最新版本v20.3.0 官方安卓版 错误

JS控制div跳转到指定的位置的几种解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。

    1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    <div id="container">
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
    </div>
      <div id="div1">div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>

    css样式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
         height: 800px;
         width: 400px;
         border: 2px solid black;
       }
    #container{
         position: fixed;
         margin:50px 500px;
    }

    该锚点法,不需要任何的js代码,即可实现跳转的方法。缺点:点击链接url发生变化,刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用,对于.cshtml页面不起作用。

    2.用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:

    html页面:
      

    1
    2
    3
    4
    5
    6
    7
    8
    <div id="container">
         <p id="p1">div1</p>
         <p id="p2">div2</p>
         <p id="p3">div3</p>
    </div>
      <div id="div1">div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>

    css样式页面同上,看下js代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    $(document).ready(function() {
      $("#p1").click(function() {
        $("html, body").animate({
          scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
      $("#p2").click(function() {
        $("html, body").animate({
          scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
      $("#p3").click(function() {
        $("html, body").animate({
          scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
    });

    简单的

代码特效 发布: 2022-11-19   修改: 2022-12-06   阅:   评:   点击报错反馈
相关文章
本类最新发布
本类推荐
本类评论
留言与评论(共有 0 条评论)
验证码:
本类软件分类
文章总排行
文章月排行
装机必备软件
全站下载总排行

1861资源网

http://www.zywlyy.cn/

   |

1861资源网 软件下载

1861资源网

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢网络科技公司技术支持