Question

源页面代码：

<a href="${context_path}/rss-footer-documents#aboutUs">About Us</a>

目标网页代码：

<h3><div id="aboutUs" ">About Us</div></h3>

当点击关于我们链接时，它指向url /rss-footer-documents.html#/termsOfRegistration。

我希望它指向/rss-footer-documents.html#termsOfRegistration。

由于它自动添加/后＃，它只是导航到页面而不是特定部分。

请告诉我如何删除/显示自动添加的网址。

Answer 1

演示 - http://jsfiddle.net/n1xtsx42/17/

$(document).ready(function () {
    $('#nav a[href^="#"]').on('click', function (e) {
        e.preventDefault(); /* adding this will remove # which is taken on click of a */

        var target = this.hash,
            $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, function () {
            window.location.hash = target;
        });
    });
});

滚动，如果窗口网址包含＃

if(window.location.hash) {
  // if window location contains hash
 var hash = window.location.hash.substr(1);
  // getting value after hash
 $target = $('#' + hash);

 $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000);

}

Answer 2

您是否尝试过像这样在锚链接上添加斜杠？

<a href="${context_path}/rss-footer-documents/#aboutUs">About Us</a>

Answer 3

我有一个正常工作的代码。

在这里，我正在从window.location.hash中删除斜线，这解决了我的问题。如果有帮助，请投票。

(function($){

    var jump=function(e)
    {
       if (e){
           e.preventDefault();
           var target = $(this).attr("href");
       }else{
           var target = location.hash.replace('/','');
       }

       $('html,body').animate(
       {
           scrollTop: $(target).offset().top
       },1,function()
       {
           location.hash = target;
       });

    }

    $('html, body').hide()

    $(document).ready(function()
    {
        $('a[href^=#]').bind("click", jump);

        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show()
                jump()
            }, 0);
        }else{
          $('html, body').show()
        }
    });

})(jQuery)

html链接导航到另一个页面的部分

3 个答案: