jQuerySmoothScroll插件WordPress的标题以上内容

Question

我为我的OnePage WordPress站点安装了jQuery Smooth Scroll Plugin。它在平滑滚动到顶端时工作得很好，但当通过menuclick滚动到锚点时，它会得到错误的位置（覆盖anchorcontent（完全是headerheight覆盖层））。当页眉在顶部“切换”时，有一些向下滚动的方式会消失，并且在浏览器窗口的顶部突然出现更多像素。我认为这个突然消失/出现动作导致这个问题，但这并不意味着什么，因为我不擅长编码等。

这是插件代码。标题高度是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; 
    } 
} 

试试这个无需插件