我正在制作一个带有导航栏的网站。这个导航栏由5个相邻的和平组成。它有一个 jQuery 滚动激活的位置更改，效果很好。
$(window).scroll(function(e){
$el = $('.navBar');
if ($(this).scrollTop() > $(window).height()*0.36 && $el.css('position') != 'fixed'){
$('.navBar').css({'position': 'fixed', 'padding-top': '0px'});
}
if ($(this).scrollTop() < $(window).height()*0.36 && $el.css('position') == 'fixed')
{
$('.navBar').css({'position': 'absolute', 'padding-top': $(window).height()*0.38});
}
});
这是我正在谈论的 html 代码:
<body>
<div class="box1">
<div class="navBar">
<div class="test">test</div>
<div class="test2">test2</div>
<img src="images/Logo/Flat8.png" class="test3">
<div class="test4">test</div>
<div class="test4">test</div>
<div class="navBarBorder"></div>
</div>
<img src="images/Cyan.png" class="box1Background">
</div>
<div class="box2">
<img src="images/Salmon.png" class="box2Background">
</div>
<div class="box3">
<img src="images/Sand.png" class="box3Background">
</div>
<div class="box4">
<img src="images/Light-Blue.png" class="box4Background">
</div>
<div class="box5">
<img src="images/Black-Blue.png" class="box5Background">
</div>
</body>
(每个盒子都有它的背景图片。)
我希望此导航栏执行的操作:当您单击 class="test1/2/3/4/5"div 时，我更喜欢使用 jQuery 进行平滑滚动。我已经做了一些研究，但对我没有任何帮助。 jQuery 滚动激活的位置更改是否与它有任何关系，或者我是否出于我的意图使用了错误的代码？
最佳答案
您需要更改导航以使用链接而不是 div，并在目标 div 中使用 ID 而不是类。例如:
<div class="navBar">
<a href="#box1">test</a>
<a href="#box2">test2</a>
<img src="images/Logo/Flat8.png" class="test3">
<a href="#box3">test</a>
<a href="#box4">test</a>
<div class="navBarBorder"></div>
</div>
有了它，以及具有匹配 ID 的目标 div，您可以使用以下脚本平滑滚动到每个 div。
jQuery('.navBar a').click(function(e) {
var location = jQuery(this).attr('href');
jQuery('html, body').animate({
scrollTop: jQuery(location).offset().top
}, 1200);
return false;
});
关于jquery - Div 链接/滚动到其他 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32249039/