jQuery滚动使粘头部分跳转

我有一个粘滞标题和导航链接的问题，因为它们都使用scrollTop函数。jQuery滚动使粘头部分跳转

第一个用于标题 - 页面在50px后滚动时缩小。第二个与导航链接一起使用 - 它使用滚动功能转到某个页面。

问题是当我点击任何导航链接，我的标志跳转/眨了一下，我不知道为什么会发生这种情况？我重新在的jsfiddle（链接断开波纹管）这个问题，这是代码：

HTML：

<nav> 
    <a class="pg1 btn" href="#">Page1</a> 
    <a class="pg2 btn" href="#">Page2</a> 
</nav> 
<article class="home"> 
    <img class="logoHomePage" src="http://via.placeholder.com/350x150.jpg"> 
</article> 
<article class="page1"></article> 
<article class="page2"></article>

的jQuery：

// Shrink logo 
$(document).scroll(function() { 
    if ($(this).scrollTop() >= 50) { 
    $(".logoHomePage").addClass("smallLogo"); 
    } else { 
    $(".logoHomePage").removeClass("smallLogo"); 
    } 
}); 

//nav 
$(".pg1.btn").click(function() { 
    $("body").animate(
    { 
     scrollTop: $(".page1").offset().top 
    }, 
    1200 
); 
}); 

$(".pg2.btn").click(function() { 
    $("body").animate(
    { 
     scrollTop: $(".page2").offset().top 
    }, 
    1200 
); 
});

CSS：

body { 
    background-color: red; 
    margin: 0px; 
    padding: 0px; 
} 

article { 
    width: 100%; 
    height: 100vh; 
    margin: auto; 
} 

.logoHomePage { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 25%; 
} 

.smallLogo { 
    width: 100%; 
    max-width: 260px; 
    margin: 10px !important; 
    position: fixed; 
    display: block; 
} 
nav { 
    z-index: 20; 
    position: fixed; 
    background-color: white; 
} 

.page1 { 
    background: green; 
} 

.page2 { 
    background: yellow; 
}

小提琴供参考：JSFiddle

编辑：点击page1链接，然后在page2上看到它在行动中。

来源

2017-08-30 DearBee

发生小故障是因为页面要跳转到页面的顶部，当您将空锚点#作为href时，这是预期的行为。它指向页面的顶部。

使用.preventDefault()可防止链接的默认行为（documentation）。像这样：

$(".pg1.btn").click(function(e) { 
    e.preventDefault(); 

    $("body").animate({ 
    scrollTop: $(".page1").offset().top 
    }, 1200); 
});

Updated fiddle

来源

2017-08-30 20:25:58 kapser

太谢谢你了！我不知道＃关于＃，再次感谢！ – DearBee

jQuery滚动使粘头部分跳转

回答

相关问题