jQuerySmoothScroll Plugin for WordPress Header 上面的内容

Question

我为我的 OnePage WordPress 网站安装了 jQuery Smooth Scroll 插件。它在平滑滚动到顶部时效果很好，但是当通过 menuclick 向下滚动到锚点时，它会导致位置错误（覆盖锚内容（确切地说是 headerheight 覆盖））。当 Header 在顶部“切换”时，有一种向下滚动的方式，它消失的地方突然向下滚动了一些像素，它固定在浏览器窗口的顶部。我认为这个突然消失/出现的动作会导致这个问题，但这并不意味着我不擅长编码等。

这是插件代码。标题高度为 80 像素。

jQuery.noConflict();
jQuery(function($) {


// Customize Settings: For more information visit                                   www.blogsynthesis.com/plugins/jquery-smooth-scroll/

// When to show the scroll link
// higher number = scroll link appears further down the page    
var upperLimit = 100; 

// Our scroll link element
var scrollElem = $('a#scroll-to-top');

// Scroll Speed. Change the number to change the speed
var scrollSpeed = 600;

// Choose your easing effect http://jqueryui.com/resources/demos/effect/easing.html
var scrollStyle = 'swing';

/****************************************************
*                                                  *
   *      JUMP TO ANCHOR LINK SCRIPT START            *
 *                                                  *
 ****************************************************/

// Show and hide the scroll to top link based on scroll position    
scrollElem.hide();
$(window).scroll(function () {          
    var scrollTop = $(document).scrollTop();        
    if ( scrollTop > upperLimit ) {
        $(scrollElem).stop().fadeTo(300, 1); // fade back in            
    }else{      
        $(scrollElem).stop().fadeTo(300, 0); // fade out
    }
});

// Scroll to top animation on click
$(scrollElem).click(function(){ 
    $('html, body').animate({scrollTop:0}, scrollSpeed, scrollStyle ); return false; 
});

      /****************************************************
  *                                                  *
  *      JUMP TO ANCHOR LINK SCRIPT START            *
  *                                                  *
  ****************************************************/

  $('a[href*="#"]:not([href="#"]):not([href^="#tab"])').click(function() 
{
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    || location.hostname == this.hostname) 
{

  var target = $(this.hash),
  headerHeight = $(".primary-header").height() + 5; // Get fixed header height

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

  if (target.length) 
  {
    $('html,body').animate({ scrollTop: target.offset().top }, scrollSpeed, scrollStyle );
    return false;
  }
}
 });


 /****************************************************
 *                                                  *
  *   FOLLOW BLOGSYNTHESIS.COM FOR WORDPRESS TIPS    *
*                                                  *
****************************************************/

});

Answer 1

我不完全确定您的意思，但我认为您所说的当您滚动到元素时，锚点会被标题覆盖。

如果是这种情况，您可以添加此CSS 来解决此问题：

:target:before {
    content:"";
    display:block;
    height:80px; /* fixed header height*/
    margin:-80px 0 0; /* negative fixed header height */
}

我不太清楚你帖子的其余部分是什么意思。

Answer 2

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

不用插件试试这个