javascript - 防止命名 anchor 默认

Question

我正在使用一个功能来平滑滚动到我的页面的子部分。

代码需要-

event.preventDefault(); 

-防止点击 anchor 时页面跳转到顶部，但它也不会将 hashtag 附加到用于 seo 的 url。

这是我正在使用的滚动功能。

<script type="text/javascript">
$('.secondaryNav a').click(function(event){
        event.preventDefault();
         //calculate destination place
         var dest=0;
         scrolling = false;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();

         }else{
              dest=$(this.hash).offset().top;
         }
         //go to destination
         $('html,body').animate({scrollTop:dest}, 2000,'easeInOutCubic',function() {
         });

     });
</script>

Answer 1

preventDefault 将阻止将哈希添加到 URL，但您可以自己添加。

location.hash = this.hash;

这将调用 onhashchange 并将浏览器滚动到哈希，因此请确保在滚动完成后调用它。

var hash = this.hash;
$('html,body').animate({scrollTop:dest}, 2000,'easeInOutCubic',function() {
    location.hash = hash;
});

演示:http://jsfiddle.net/Sub7m/4/show/ (编辑于:http://jsfiddle.net/Sub7m/4/)

如果您的浏览器支持，您还可以使用history.replaceState({}, null, this.hash) 将哈希添加到URL，而无需移动浏览器或调用onhashchange 。

演示:http://jsfiddle.net/Sub7m/5/show/ (编辑于:http://jsfiddle.net/Sub7m/5/)