Question

我为我的OnePage WordPress网站安装了jQuery Smooth Scroll插件。滚动平滑到顶部时效果非常好，但是当通过menuclick向下滚动到锚点时，它会错误地定位（覆盖anchorcontent（正好是headerheight overlay））。当标题＆＃34;切换＆＃34;最重要的是，有一种向下滚动的方式，它会消失，突然在它上面的一些像素被固定在浏览器窗口的顶部。我认为这突然消失/出现动作导致了这个问题，但这并不意味着什么，因为我不擅长编码等。

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

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

尝试没有插件的

WordPress标题的jQuerySmoothScroll插件高于内容

2 个答案: