代码之家 › 专栏 › 技术社区 › Dennis

从另一个页面滚动到主页上的锚定

anchor wordpress jquery

1

Dennis · 技术社区 · 7 年前

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

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

我的解决方案是,如果我点击一个带有#的菜单项,在它前面添加网站的基本URL?还是有更好的方法来处理这个问题?

    //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值的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);
    });

但这一个也不起作用,并抛出了一个错误。

2 回复 | 直到 7 年前

1

yaakov 7 年前

您将属性添加到错误的对象。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>

2

0

Mohcin Bounouara 7 年前

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