从另一个页面滚动到主页锚点

Question

我有一个带有自定义菜单项的 Wordpress 网站：

大约有link#about
城市有 link #cities
实用信息转到另一页。

所有 #link 都滚动到主页上的特定块。但是当我在实用信息页面上时，我的 URL 是 url.be/practical-info/ 所以当我尝试点击 "About" 时，URL 是url.be/practical-info/#about and than 显然行不通。

我的解决方案是，如果我单击一个带有# 的菜单项，在它前面添加网站基础URL？或者有更好的方法来处理这个问题吗？

我已经在 jQuery:

    //anchor links
    jQuery('a.nav-link[href^="#"]').on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 2000, function() {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
          return false;
      } // End if
    });

或者这是替换 #links:

中的 href 值的 for each

    jQuery("a[href^='\#']").each(function(){ 
        //this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
        var getUrl = window.location;
        var baseurl = getUrl.origin;
        var hash = this.href.substr(this.href.indexOf('#')+1);
        var fullurl = baseurl + '#' + hash;

        this.attr('href', fullurl);
        console.log(this);
    });

但是这个也不起作用并抛出错误。

Answer 1

您将属性添加到错误的对象中。 jQuery的$(this)有.attr()的功能，但是原生的this没有。

（我在代码片段中添加了一点 CSS 以便更容易看到示例。）

jQuery("a[href^='\#']").each(function() {
      var getUrl = window.location;
      var baseurl = getUrl.origin;
      var hash = this.href.substr(this.href.indexOf('#') + 1);
      var fullurl = baseurl + '#' + hash;
    
      $(this).attr('href', fullurl);
      // ^ needs to be $(this), not this. You can also use this.href = fullurl;  
    });

a {
  display: block;
}
a[href*='#']:after {
  content: " (" attr(href) ")";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="other-stuff">Other Stuffs</a>

Answer 2

if (window.location.hash)
    scroll(0,0);
setTimeout(function(){scroll(0,0);},1);

$(function(){
$('.scroll').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({
        scrollTop:$($(this).attr('href')).offset().top + 'px'
    },1000,'swing');
});


if(window.location.hash){
    // smooth scroll to the anchor id
    $('html,body').animate({
        scrollTop:$(window.location.hash).offset().top + 'px'
        },1000,'swing');
    }
});

从另一个页面滚动到主页锚点

Scroll to anchor on homepage from another page

wordpress

anchor

jquery