Question

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

关于有链接#about
城市具有链接#cities
实用信息转到另一页。

所有＃个链接都滚动到其在主页上的特定区域。但是，当我进入实用信息页面时，我的URL是url.be/practical-info/，所以当我尝试单击“关于”时，URL是url.be/practical-info/#about，显然可以胜出不行。

我的解决方案是，如果我单击其中带有＃的菜单项，则在其前面添加网站基本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
    });

或者这是每个替换＃链接中的href值的

：

    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');
    }
});

滚动到其他页面的首页上

2 个答案: