Question

我正在尝试使用WordPress中的“animate”和“scroll-top”从外部页面创建锚点链接，但是当我尝试使用锚点链接转到特定id时形成不同的页面，页面滚动到底部而不是锚ID，除了第一个链接，它就像它想象的那样工作。

     function foo(){
        $('#masthead #site-navigation a[href*="#"]:not([href="#"])').click(function() {

       // top offstet
       var offset = 10;
       // get target    form hash
       var target = $(this.hash);
       // Get hash from this
       var hash = $(this).attr('href');
       // Get URL from injected JavaScript page object siteInfo
       var host = siteInfo.siteUrl;

       // if home   
       if($('body.home').length > 0){

          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

          if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top + offset
             }, 1000);
           return false;
         }
      } 
      else {
         window.location = host+"/#"+hash.substring(1);
         return false;
       }
    }); 
  }

 foo();

Answer 1

您的目标必须是有效的dom元素你下面的内容使target成为一个字符串

target = "/#"+hash.substring(1);

您需要jquery选择器和

target = $('#'+hash.substring(1));

target现在成为有效的dom元素，.offset().top将返回

的值

P.S如果页面将重新加载，那么.animate()必须在.click()函数之外，因为js脚本本身将被重新加载

$('#masthead #site-navigation a[href*="#"]:not([href="#"])').click(function() {
  var offset = 10; // <-- change the value here
  // Get hash from this
  var hash = $(this).attr('href');
  // Get URL from injected JavaScript page object siteInfo
  var host = siteInfo.siteUrl;
  window.location = host+"/#"+hash.substring(1);
});

您只需要目标页面的js上的以下部分。它获取当前网址并获取#之后的文本，该文本应对应于您要滚动到的div的ID

var currentUrl = window.location.href;
if(currentUrl.includes('#')) {
    var urlArray = currentUrl.split('#');
  // gets the dom that has the id evaluated from `hash.substring(1)`
  target = $('#'+urlArray[1]);
  $('html, body').animate({
    scrollTop: target.offset().top + offset
  }, 1000);
}

WordPress使用jQuery滚动到不同页面的ID

1 个答案: