jquery 更改滚动时的URL哈希并保持后退按钮工作

tjjdgumg 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(106)

在一个带有固定顶部菜单和锚点导航的单页布局中，我有一个“scrollspy”，它可以更改滚动时的片段标识符，根据滚动位置为菜单链接提供一个活动类，并使用Velocity.js将滚动动画化到锚点。
不幸的是，当点击浏览器的后退按钮时，它会让我完成滚动方式的所有步骤，这意味着我加载网站并向下滚动和向上滚动一点点，然后频繁地点击后退按钮，浏览器也会向下滚动和向上滚动，但实际上不会转到最后访问的ID或浏览器历史记录。
Here is the jsfiddle.

// jQuery on DOM ready

// In-Page Scroll Animation with VelocityJS
// ------------------------------------------------ //
// https://john-dugan.com/fixed-headers-with-hash-links/
$('.menu-a').on('click', function(e) {
    var hash  = this.hash,
        $hash = $(hash)

        addHash = function() {
            window.location.hash = hash;
        };      

      $hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], complete: addHash });

    e.preventDefault();
});

// ScrollSpy for Menu items and Fragment Identifier
// ------------------------------------------------ //
// https://jsfiddle.net/mekwall/up4nu/
$menuLink           = $('.menu-a')

var lastId,
    // Anchors corresponding to menu items
    scrollItems = $menuLink.map(function(){
    var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

$(window).scroll(function(){
    // Get container scroll position
    var fromTop = $(this).scrollTop()+ 30; // or the value for the #navigation height

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
        return this;
    });

    // Get the id of the current element
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";
    if (lastId !== id) {
        lastId = id;

        // Set/remove active class
        $menuLink
        .parent().removeClass("active")
        .end().filter("[href='#"+id+"']").parent().addClass("active");
    }

    // If supported by the browser we can also update the URL
    // http://codepen.io/grayghostvisuals/pen/EtdwL
    if (window.history && window.history.pushState) {
        history.pushState("", document.title,'#'+id);
    }   
});

字符串

使用上面的代码，下面的工作正常：

当使用VelocityJS在菜单链接上单击滚动动画时，散列或片段标识符更新良好。
活动类在滚动时被赋予相应的菜单链接。
当滚动而不是单击菜单链接时，片段标识符也会很好地更新。
问题
**第1部分：**当你在小提琴上滚动一点，然后点击后退按钮，你会看到滚动条以完全相同的方式“移动”，记住已经完成的滚动。

我需要后退按钮像往常一样工作。a）返回浏览器历史记录并返回到您所在的页面/网站; b）当单击锚链接（i），然后单击锚链接（ii），然后单击后退按钮时，页面应返回到锚链接（i）。

**第2部分：**由于history.pushState在IE8中不支持，我正在寻找一种使用window.location.hash = $(this).attr('id');的方法。无论我在代码的最后尝试了什么，我都无法让window.location.hash = $(this).attr('id');工作。我真的不想使用HistoryJS或其他东西，但我有兴趣学习并自己编写它。

除了返回按钮损坏的行为之外，我想要的所有其他行为都已经存在，现在我只需要修复返回按钮的行为。

edit我想我可能已经找到了一个解决方案here，将测试，然后详细回复，如果我得到这个工作。

jquery

来源：https://stackoverflow.com/questions/37419183/change-url-hash-on-scroll-and-keep-back-button-working

3条答案

按热度按时间

ffx8fchx1#

为了回答你的问题的第一部分，如果你不想污染浏览器的历史记录，你可以使用history.replaceState()而不是history.pushState()。当pushState更改URL并向浏览器的历史记录添加新条目时，replaceState更改URL，同时修改当前的历史记录条目，而不是添加新条目。
还有一篇很好的文章，包括pushState和replaceStateon MDN之间的差异。

赞(0）回复(0）举报 2023-08-04

xfyts7mz2#

对于旧的浏览器，我决定包括https://github.com/devote/HTML5-History-API，并在适当的地方，我得到了所需的行为（或多或少）。
这个答案有：

一个滚动间谍的菜单项和设置和活动类的滚动
scrollspy还可以处理URL哈希，根据当前滚动到的部分设置正确的哈希
滚动停止功能，检查用户何时停止滚动，然后从当前活动的菜单项中获取值并将其设置为当前URL散列。这样做是为了在滚动时不捕捉区段的锚点，而是仅捕捉用户滚动到的区段的锚点。
当单击菜单链接以及使用后退和前进按钮时，使用Velocity.js进行平滑滚动
函数对加载和重新加载页面做出React，这意味着如果您输入具有特定URL哈希的页面，它将动画滚动到该部分，如果页面重新加载，它将动画滚动到当前部分的顶部
代码是一个粗略的草图，可能需要一些调整，这只是为了演示的目的。我想我还是一个初学者，请指出明显的错误，这样我就可以从中学习。所有代码片段的来源链接也包括在内。

// In-Page Scroll Animation to Menu Link on click
// ------------------------------------------------ //
// https://john-dugan.com/fixed-headers-with-hash-links/
// https://stackoverflow.com/questions/8355673/jquery-how-to-scroll-an-anchor-to-the-top-of-the-page-when-clicked
// http://stackoverflow.com/a/8579673/1010918
// $('a[href^="#"]').on('click', function(e) {
$('.menu-a').on('click', function(e) {

    // default = make hash appear right after click
    // not default = make hash appear after scrolling animation is finished
    e.preventDefault();

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

    $hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], queue: false });
});


// In-Page Scroll Animation to Hash on Load and Reload
// ----------------------------------------------------------- //
// https://stackoverflow.com/questions/680785/on-window-location-hash-change
// hashchange triggers popstate !
$(window).on('load', function(e) {

    var hash  = window.location.hash;
    console.log('hash on window load '+hash);
    $hash = $(hash)

    $hash.velocity("scroll", { duration: 500, easing: [ .4, .21, .35, 1 ], queue: false });

    // if not URL hash is present = root, go to top of page on reload
    if (!window.location.hash){
        $('body').velocity("scroll", { duration: 500, easing: [ .4, .21, .35, 1 ], queue: false });
    }   
});


// In-Page Scroll Animation to Hash on Back or Forward Button
// ---------------------------------------------------------- //
$('.menu-a').on('click', function(e) {  
    e.preventDefault(); 
    // keep the link in the browser history
    // set this separately from scrolling animation so it works in IE8
    history.pushState(null, null, this.href);
    return false
}); 
$(window).on('popstate', function(e) {
    // alert('popstate fired');
    $('body').append('<div class="console1">popstate fired</div>');
    $('.console1').delay(1000).fadeOut('slow');

    if (!window.location.hash){
        $('body').append('<div class="console2">no window location hash present</div>');

        $('body').velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], queue: false });

        $('.console2').delay(1000).fadeOut('slow');
    }

    console.log('window.location.hash = '+window.location.hash);
    var hash  = window.location.hash;
    $hash = $(hash)

    $hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], queue: false });
});


// ScrollSpy for Menu items only - gives selected Menu items the active class
// ------------------------------------------------------------------------ //
// Does not update fragment identifier in URL https://en.wikipedia.org/wiki/Fragment_identifier
// https://jsfiddle.net/mekwall/up4nu/
    var lastId,

    // Anchors corresponding to menu items
    scrollItems = $menuLink.map(function(){
        var item = $($(this).attr("href"));
        // console.table(item);
        if (item.length) { return item; }
    });

    // Give menu item the active class on load of corresponding item
    function scrollSpy () {

        // Get container scroll position
        var fromTop = $(this).scrollTop()+ $menuButtonHeight;

        // Get id of current scroll item
        var cur = scrollItems.map(function(){
            if ($(this).offset().top < fromTop)
            return this;
        });

        // Get the id of the current element
        cur = cur[cur.length - 1];
        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
            lastId = id;
            // Set/remove active class
            $menuLink
            .parent().removeClass("active").end()
            .filter("[href='#"+id+"']").parent().addClass("active");
        }

        // Active Menu Link href Attribute
        activeMenuLinkHref = $('.menu-li.active > .menu-a').attr('href');
        // console.log('activeMenuLinkHref '+activeMenuLinkHref);   
    }
    scrollSpy()

    $(window).scroll(function(e){
        scrollSpy()
    });


// On Stop of Scrolling get Active Menu Link Href and set window.location.hash
// --------------------------------------------------------------------------- //

// Scroll Stop Function
//---------------------//
// https://stackoverflow.com/questions/8931605/fire-event-after-scrollling-scrollbars-or-mousewheel-with-javascript
// http://stackoverflow.com/a/8931685/1010918
// http://jsfiddle.net/fbSbT/1/
// http://jsfiddle.net/fbSbT/87/

(function(){ 
    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1); 
    special.scrollstart = {
        setup: function() { 
            var timer,
                handler =  function(evt) { 
                    var _self = this,
                        _args = arguments; 
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        // throws "TypeError: jQuery.event.handle is undefined"
                        // jQuery.event.handle.apply(_self, _args);
                        // solution
                        // http://stackoverflow.com/a/20809936/1010918
                        // replace jQuery.event.handle.apply with jQuery.event.dispatch.apply
                        jQuery.event.dispatch.apply(_self, _args);
                    } 
                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency); 
                }; 
            jQuery(this).bind('scroll', handler).data(uid1, handler); 
        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    }; 
    special.scrollstop = {
        latency: 250,
        setup: function() { 
            var timer,
                    handler = function(evt) { 
                    var _self = this,
                        _args = arguments; 
                    if (timer) {
                        clearTimeout(timer);
                    }
                     timer = setTimeout( function(){ 
                        timer = null;
                        evt.type = 'scrollstop';                        
                        // throws "TypeError: jQuery.event.handle is undefined"
                        // jQuery.event.handle.apply(_self, _args);
                        // solution
                        // http://stackoverflow.com/a/20809936/1010918
                        // replace jQuery.event.handle.apply with jQuery.event.dispatch.apply
                        jQuery.event.dispatch.apply(_self, _args); 
                    }, special.scrollstop.latency); 
                }; 
            jQuery(this).bind('scroll', handler).data(uid2, handler); 
        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();


// Scroll Stop Function Called
//----------------------------//

$(window).on("scrollstop", function() {

    // window.history.pushState(null, null, activeMenuLinkHref);
    // window.history.replaceState(null, null, activeMenuLinkHref);

    // http://stackoverflow.com/a/1489802/1010918 //
    // works best really
    hash = activeMenuLinkHref.replace( /^#/, '' );
    console.log('hash '+hash);
    var node = $( '#' + hash );
    if ( node.length ) {
      node.attr( 'id', '' );
      // console.log('node.attr id'+node.attr( 'id', '' ));
    }
    document.location.hash = hash;
    if ( node.length ) {
      node.attr( 'id', hash );
    }
});

字符串
CSS格式

.console1{
    position: fixed;
    z-index: 9999;
    top:0;
    right:0;    
    background-color: #fff;
    border: 2px solid red;
}

.console2{
    position: fixed;
    z-index: 9999;
    bottom:0;
    right:0;    
    background-color: #fff;
    border: 2px solid red;
}

型
我也会在适当的时候提供一个jsfiddle。;）

赞(0）回复(0）举报 2023-08-04

ha5z0ras3#

为了防止浏览器记住滚动位置（如果它不是你的锚链接所在的滚动位置），你必须设置