160

我们有一些页面使用 ajax 来加载内容，并且在某些情况下我们需要深度链接到页面中。与其拥有指向“用户”的链接并告诉人们单击“设置”，不如将人们链接到user.aspx#settings会很有帮助

为了让人们向我们提供指向部分的正确链接（用于技术支持等），我将其设置为在单击按钮时自动修改 URL 中的哈希值。当然，唯一的问题是，当这种情况发生时，它也会将页面滚动到该元素。

有没有办法禁用它？以下是我到目前为止的做法。

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash=$(this).attr("id")
            //return false;
    });
});

我曾希望这return false;会阻止页面滚动-但这只会使链接根本不起作用。所以现在只是注释掉了，所以我可以导航。

有任何想法吗？

4

17 回答 17

111

第 1 步：您需要解散节点 ID，直到设置哈希。这是通过在设置散列时从节点上删除 ID，然后将其重新添加来完成的。

hash = hash.replace( /^#/, '' );
var node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
}
document.location.hash = hash;
if ( node.length ) {
  node.attr( 'id', hash );
}

第 2 步：一些浏览器会根据最后一次看到 ID 节点的位置触发滚动，因此您需要帮助他们一点。您需要div在视口顶部添加一个额外的，将其 ID 设置为哈希，然后将所有内容回滚：

hash = hash.replace( /^#/, '' );
var fx, node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
  fx = $( '<div></div>' )
          .css({
              position:'absolute',
              visibility:'hidden',
              top: $(document).scrollTop() + 'px'
          })
          .attr( 'id', hash )
          .appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
  fx.remove();
  node.attr( 'id', hash );
}

第3步：将其包装在插件中并使用它而不是写入location.hash...

于 2009-09-28T23:06:50.333 回答
111

使用history.replaceState或history.pushState* 更改哈希。这不会触发到关联元素的跳转。

例子

$(document).on('click', 'a[href^=#]', function(event) {
  event.preventDefault();
  history.pushState({}, '', this.href);
});

JSFiddle 上的演示

* 如果你想要历史向前和向后支持

历史行为

如果您正在使用history.pushState并且不想在用户使用浏览器的历史按钮（前进/后退）时滚动页面，请查看实验scrollRestoration设置（仅限 Chrome 46+）。

history.scrollRestoration = 'manual';

浏览器支持

于 2013-01-28T11:09:53.997 回答
91

我想我可能已经找到了一个相当简单的解决方案。问题是 URL 中的哈希也是您滚动到的页面上的一个元素。如果我只是在哈希前面加上一些文本，现在它不再引用现有元素！

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash="btn_"+$(this).attr("id")
            //return false;
    });
});

现在 URL 显示为page.aspx#btn_elementID不是页面上的真实 ID。我只是删除“btn_”并获取实际的元素 ID

于 2009-10-02T20:01:45.283 回答
4

我最近正在构建一个依赖于window.location.hash维护状态的轮播，并发现 Chrome 和 webkit 浏览器会在window.onhashchange触发事件时以尴尬的方式强制滚动（甚至到不可见的目标）。

甚至尝试注册一个停止传播的处理程序：

$(window).on("hashchange", function(e) { 
  e.stopPropogation(); 
  e.preventDefault(); 
});

没有采取任何措施来阻止默认浏览器行为。我找到的解决方案是window.history.pushState在不触发不良副作用的情况下更改哈希。

 $("#buttons li a").click(function(){
    var $self, id, oldUrl;

    $self = $(this);
    id = $self.attr('id');

    $self.siblings().removeClass('selected'); // Don't re-query the DOM!
    $self.addClass('selected');

    if (window.history.pushState) {
      oldUrl = window.location.toString(); 
      // Update the address bar 
      window.history.pushState({}, '', '#' + id);
      // Trigger a custom event which mimics hashchange
      $(window).trigger('my.hashchange', [window.location.toString(), oldUrl]);
    } else {
      // Fallback for the poors browsers which do not have pushState
      window.location.hash = id;
    }

    // prevents the default action of clicking on a link.
    return false;
});

然后，您可以同时监听正常的 hashchange 事件和my.hashchange：

$(window).on('hashchange my.hashchange', function(e, newUrl, oldUrl){
  // @todo - do something awesome!
});
于 2015-03-25T13:02:24.120 回答
3

您的原始代码片段：

$("#buttons li a").click(function(){
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

将其更改为：

$("#buttons li a").click(function(e){
    // need to pass in "e", which is the actual click event
    e.preventDefault();
    // the preventDefault() function ... prevents the default action.
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});
于 2010-07-22T18:37:02.167 回答
2

好的，这是一个相当古老的话题，但我想我会加入，因为“正确”的答案不适用于 CSS。

这个解决方案基本上可以防止点击事件移动页面，所以我们可以先获取滚动位置。然后我们手动添加hash，浏览器会自动触发hashchange事件。我们捕获 hashchange 事件并滚动回正确的位置。回调将您的哈希黑客保存在一个地方，从而分离并防止您的代码导致延迟。

var hashThis = function( $elem, callback ){
    var scrollLocation;
    $( $elem ).on( "click", function( event ){
        event.preventDefault();
        scrollLocation = $( window ).scrollTop();
        window.location.hash = $( event.target ).attr('href').substr(1);
    });
    $( window ).on( "hashchange", function( event ){
        $( window ).scrollTop( scrollLocation );
        if( typeof callback === "function" ){
            callback();
        }
    });
}
hashThis( $( ".myAnchor" ), function(){
    // do something useful!
});
于 2013-11-20T13:59:32.063 回答
2

在此处添加此内容是因为更相关的问题都已标记为指向此处的重复问题……</p>

我的情况更简单：

  • 用户点击链接 ( a[href='#something'])
  • 单击处理程序执行以下操作：e.preventDefault()
  • 平滑滚动功能：$("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
  • 然后 window.location = link;

这样，滚动就会发生，并且在更新位置时不会发生跳转。

于 2014-07-18T08:38:22.223 回答
2

嗯，我有一个有点粗略但绝对有效的方法。
只需将当前滚动位置存储在临时变量中，然后在更改哈希后将其重置。:)

所以对于原始示例：

$("#buttons li a").click(function(){
        $("#buttons li a").removeClass('selected');
        $(this).addClass('selected');

        var scrollPos = $(document).scrollTop();
        document.location.hash=$(this).attr("id")
        $(document).scrollTop(scrollPos);
});
于 2014-08-24T17:45:29.110 回答
1

我不认为这是可能的。据我所知，浏览器唯一不滚动到更改document.location.hash的情况是页面中不存在哈希。

本文与您的问题没有直接关系，但它讨论了更改的典型浏览器行为document.location.hash

于 2009-09-28T22:12:48.523 回答
1

如果您将 hashchange 事件与哈希解析器一起使用，您可以防止对链接的默认操作并更改 location.hash 添加一个字符以与元素的 id 属性有差异

$('a[href^=#]').on('click', function(e){
    e.preventDefault();
    location.hash = $(this).attr('href')+'/';
});

$(window).on('hashchange', function(){
    var a = /^#?chapter(\d+)-section(\d+)\/?$/i.exec(location.hash);
});
于 2013-09-10T19:54:04.483 回答
0

另一种方法是添加一个隐藏在视口顶部的 div。然后在将散列添加到 url 之前，为该 div 分配散列的 id ......所以你不会得到滚动。

于 2011-02-03T12:18:46.083 回答
0

这是我启用历史记录的选项卡的解决方案：

    var tabContainer = $(".tabs"),
        tabsContent = tabContainer.find(".tabsection").hide(),
        tabNav = $(".tab-nav"), tabs = tabNav.find("a").on("click", function (e) {
                e.preventDefault();
                var href = this.href.split("#")[1]; //mydiv
                var target = "#" + href; //#myDiv
                tabs.each(function() {
                    $(this)[0].className = ""; //reset class names
                });
                tabsContent.hide();
                $(this).addClass("active");
                var $target = $(target).show();
                if ($target.length === 0) {
                    console.log("Could not find associated tab content for " + target);
                } 
                $target.removeAttr("id");
                // TODO: You could add smooth scroll to element
                document.location.hash = target;
                $target.attr("id", href);
                return false;
            });

并显示最后选择的选项卡：

var currentHashURL = document.location.hash;
        if (currentHashURL != "") { //a tab was set in hash earlier
            // show selected
            $(currentHashURL).show();
        }
        else { //default to show first tab
            tabsContent.first().show();
        }
        // Now set the tab to active
        tabs.filter("[href*='" + currentHashURL + "']").addClass("active");

注意通话中*=的。filter这是 jQuery 特有的东西，没有它，启用历史记录的选项卡将失败。

于 2014-03-08T20:51:01.603 回答
0

此解决方案在实际 scrollTop 处创建一个 div 并在更改哈希后将其删除：

$('#menu a').on('click',function(){
    //your anchor event here
    var href = $(this).attr('href');
    window.location.hash = href;
    if(window.location.hash == href)return false;           
    var $jumpTo = $('body').find(href);
    $('body').append(
        $('<div>')
            .attr('id',$jumpTo.attr('id'))
            .addClass('fakeDivForHash')
            .data('realElementForHash',$jumpTo.removeAttr('id'))
            .css({'position':'absolute','top':$(window).scrollTop()})
    );
    window.location.hash = href;    
});
$(window).on('hashchange', function(){
    var $fakeDiv = $('.fakeDivForHash');
    if(!$fakeDiv.length)return true;
    $fakeDiv.data('realElementForHash').attr('id',$fakeDiv.attr('id'));
    $fakeDiv.remove();
});

可选，在页面加载时触发锚事件：

$('#menu a[href='+window.location.hash+']').click();
于 2014-03-27T13:21:01.587 回答
0

我有一个更简单的方法对我有用。基本上，请记住 HTML 中的哈希实际上是什么。它是指向名称标签的锚链接。这就是它滚动的原因......浏览器正在尝试滚动到锚链接。所以，给它一个！

  1. 在 BODY 标签下，输入你的版本：
<a name="home"></a><a name="firstsection"></a><a name="secondsection"></a><a name="thirdsection"></a>

  1. 用类而不是 ID 命名您的部分 div。

  2. 在您的处理代码中，去掉井号并用一个点替换：

    var trimPanel = loadhash.substring(1); //丢失哈希

    var dotSelect = '.' +修剪面板；//用点替换散列

    $(dotSelect).addClass("activepanel").show(); //显示与哈希关联的div。

最后，删除 element.preventDefault 或 return: false 并允许导航发生。窗口将停留在顶部，哈希将附加到地址栏 url，并且正确的面板将打开。

于 2015-11-17T19:38:07.777 回答
0

我认为您需要在 hashchange 之前将滚动重置到其位置。

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash) {
        $("#buttons li a").removeClass('selected');
        s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
        eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function() {
            var scrollLocation = $(window).scrollTop();
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash = $(this).attr("id");
            $(window).scrollTop( scrollLocation );
    });
});
于 2017-04-16T12:20:33.310 回答
0

如果在您的页面上您使用 id 作为锚点，并且您希望让用户将#something 附加到 url 的末尾，并使用您自己定义的动画让页面滚动到该 #something 部分javascript 函数，hashchange 事件监听器将无法做到这一点。

如果您只是在 hashchange 事件之后立即放置一个调试器，例如，像这样（嗯，我使用 jquery，但您明白了）：

$(window).on('hashchange', function(){debugger});

你会注意到，一旦你改变你的 url 并按下回车键，页面会立即停在相应的部分，只有在那之后，你自己定义的滚动功能才会被触发，它会滚动到那个部分，看起来很坏。

我的建议是：

  1. 不要使用 id 作为您要滚动到的部分的锚点。

  2. 如果你必须使用身份证，就像我一样。请改用“popstate”事件侦听器，它不会自动滚动到您附加到 url 的部分，相反，您可以在 popstate 事件中调用自己定义的函数。

    $(window).on('popstate', function(){myscrollfunction()});

最后，您需要在自己定义的滚动函数中做一些小技巧：

    let hash = window.location.hash.replace(/^#/, '');
    let node = $('#' + hash);
    if (node.length) {
        node.attr('id', '');
    }
    if (node.length) {
        node.attr('id', hash);
    }

删除标签上的 id 并重置它。

这应该可以解决问题。

于 2018-05-04T21:38:24.097 回答
-5

仅在文档准备好时将此代码添加到 jQuery 中

参考：http ://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
于 2014-11-25T14:43:08.933 回答