滚动后删除锚链接-也适用于其他页面的链接

Remove anchor link after scrolling - works also on links from another page

本文关键字：链接 其他 适用于 删除 滚动      更新时间：2023-09-26

我建立了一个具有平滑滚动功能的单页网站，在平滑滚动后从URL中删除锚链接。这是我正在使用的jQuery：

$(function() {
    $('a.page-scroll').on('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top  - 60
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
});

在我添加其他页面之前，一切都很好。在另一个外部页面上有<a class="page-scroll" href="../#contact">Contact</a>这样的链接后，我无法删除锚链接。

我到处搜索SO，但找不到有效的解决方案。

如果链接来自外部页面，我并不完全关心平滑滚动。我最需要的是导航/滚动到主页的id部分（带有偏移量以适应固定导航），并在链接来自外部页面（来自我网站上的其他页面或其他网站）时从浏览器URL窗口中删除锚链接。

我也尝试过，但它同样只适用于同一页面上id的内部链接：

<script>
$(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 - 60
        }, 1000);
        return false;
      }
    }
  });
});
</script>

我也尝试过，但没有运气：

    <script type="text/javascript">
(function($) {
    $(document).ready(function() {
    var url=document.URL.split("#");
    var ancher=url[1];
         $('html, body').animate({
           'scrollTop':   $('#'+ancher).offset().top - 60
         }, 5000);
    });
})(jQuery);
  </script>

任何新年前夕的帮助都将不胜感激，这样我就可以完成这个项目了！

我可能不理解这个问题的严重程度，但我相信你正在努力做到这一点，这样href就不会在想要滚动的页面上触发，而是在链接到其他页面而不是页面本身的部分的页面上激发。也许这样的东西对你有用：

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        if ($anchor[0].href[0] === '#') {
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top  - 60
            }, 1000, 'easeInOutExpo');
            event.preventDefault();
            return false;
        } else {
            return true;
        }
    });
});

这样做的目的是看到href中的前导字符是一个#，这意味着它本身就是一个指向某个节的链接。

让我知道这是否有帮助和/或我是否走在正确的轨道上。

ps：我把.bind留在了那里，因为我不知道你使用的是什么版本的jQuery，但更新的语法是在上使用

新年快乐

只是为了稍微添加一些内容，以便主页的深层链接指向适当的部分，但没有散列标签：

您可以从window.location中删除该"hash"变量，但如果您试图完全删除该hash标签，则会导致浏览器刷新。这也会导致观看者失去位置（从而消除深度链接的目的）。

要更改哈希标记值（保留#）：

window.location.hash = ''; // clears the hash tag

要删除哈希标签及其值（清除#和所有经过它的内容）：

window.location.href = window.location.href.substr(0, window.location.href.indexOf('#')); // this causes a browser refresh

如果它不是完全明显的，你可以在页面加载上运行它

$(document).ready(function() {
    if (typeof(window.location.hash) !== 'undefined' && window.location.hash.length > 0) {
        window.location.hash = ''; // will clear the hash anytime someone arrives with a hash tag
    }
});

对于平滑滚动的页面，请尝试使用replaceState()
它将从浏览器URL窗口中删除锚链接处的标签（无需重新加载页面）。

// smooth scrolling
function scrollTo(selectors)
{
    if(!$(selectors).length) return;
    var selector_top = $(selectors).offset().top - 0;
    $('html,body').animate({ scrollTop: selector_top }, 'slow');
}    
// do scroll and clear the hash tag    
$(window).on('load', function(){          
    if( typeof(location.hash) !== 'undefined' && location.hash.length ) {
       scrollTo(location.hash);
       history.replaceState(null, null, location.pathname);                      
    }       
});
相关文章：