#锚点问题,点击锚点#xx的时候,如何让 URL不变

点击#xx后url就会变成 域名+php+#xx

如何点击#xx后,URL保持不变,域名+php

阅读 9.1k
4 个回答

<a href="#xxx" onclick="return false">xxx</a>
<!-- 让DOM行为失效即可,如果还有更具体的逻辑,在事件中做相应的编码即可 -->

遇到了同样的问题,还尝试过popstate弹出历史记录之类的,不行。查到了你的这个提问,现在解决了后回来加个回答,我最终解决方法是,不用a锚点,用Jquery
【第一步】给文章中的h1-h5添加id

<h1 id="c0">一、教程内容</h1>

【第二步】把要跳转的位置id作为目录的name属性记录下来:

<a name="c0" class="cbtn article-ch1">一、教程内容</a>

【第三步】用JS或者Jquery实现跳转,Jquery可以写一些模拟滚动条之类的操作

JS:
   document.getElementById($(this).attr('name')).scrollIntoView()
Jquery:
  $(document).on('click', '.cbtn', function(e) {
            $('html,body').animate({scrollTop: $("#" + this.name).offset().top}, 500);
        });

完整的实现可以参考我的博客文章:《Jquery实现文章目录侧边栏导航》

域名本来就不会变呀。

<a href="javascript:;">xx</a>

<head>

<script type='text/javascript'>
jQuery(document).ready(function($) {

    $(".scroll").click(function(event){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
    });
});
</script>

</head>
<body>

<a class="scroll" href="#codeword">Blue Words</a>
<div id="codeword"></div>

</body>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进