zoukankan      html  css  js  c++  java
  • JS实现跳转到页面任何地方

    要实现两个内容:

    1、从A页面跳转到B页面任何地方

    方法:用id对要跳转的地方进行标记。

    首先,在A页面可以设一个链接

    1 <a href = "b.html#pos" target = "_blank">点击跳转</a>

    然后在B页面要跳转的地方

    <div id = "pos"></div>

    这样就成功实现跳转。

    2、从B页面某处跳转到该页面任何地方

    方法:与上述思路一样,但如果是按钮的话需要添加onclick事件。

    <a href = "#pos">点击跳转</a>
    
    ......
    
    
    <div id = "pos">跳转到这里</div>

    如果是点击按钮跳转的话。。。

    <script type = "text/javascript">
        function on_scroll() {
           document.getElementById("anchor_scroll").click();
        }
    </script>
    
    <button onclick = on_scroll();>点击跳转</button>
    
    <a href = "#pos" id = "anchor_scroll" style = "display:none">点击跳转</a>
    
    ......
    
    <div id = "pos">跳转到这里</div>

    还有个方法是用jQuery的animate动画方法,这个使用的还不是很熟练。

     <script type="text/javascript">
     function click_scroll() {
      var scroll_offset = $("#pos").offset();  //得到pos这个div层的offset,包含两个值,top和left
      $("body,html").animate({
       scrollTop:scroll_offset.top  //让body的scrollTop等于pos的top,就实现了滚动
       },0);
     }
     </script>
     <button onclick="click_scroll();" >点击button跳转</button>...
    这里是很多文字,把页面撑开,撑出滚动条
    ...
    <div id="pos">跳转到这里</div>

    这样有个好处就是可以控制跳转的时间,其中的0代表跳转时间,调成1000则跳转时间会变长。。。

    总之,通过网上的学习,我深刻地了解到,id是个好东西。。。

  • 相关阅读:
    pytest知识梳理
    linux服务器时间不同步解决
    python re 多行匹配模式
    nginx--知识梳理
    tomcat--知识梳理
    利用springboot 重定向到静态资源功能,下载一些文件文件
    调试C++代码内存释放,在VS2019控制台显示内存泄露
    C++Primer第五版 第九章 习题9.22
    nginx 配置中间证书
    云苍穹消息推送代码
  • 原文地址:https://www.cnblogs.com/RRirring/p/5666119.html
Copyright © 2011-2022 走看看