1
我已经实现了基本的平滑滚动到锚我的导航列表....平滑滚动导航 - 添加类活动链接
jQuery(function() {
jQuery('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
if (target.length) {
jQuery('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});html, body{
margin:0;
padding:0;
}
#navigation{
position:fixed;
background:wheat;
width:100%;
top:0;
}
#navigation li{
display:inline;
}
.item1, .item2, .item3, .item4{
height:500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="navigation">
<li><a href="#item1_anchor">Item 1</a></li>
<li><a href="#item2_anchor">Item 2</a></li>
<li><a href="#item3_anchor">Item 3</a></li>
<li><a href="#item4_anchor">Item 4</a></li>
</ul>
<div class="item1">
<a class="anchor" id="item1_anchor"></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lorem scelerisque, scelerisque felis bibendum, gravida tellus. Praesent ut tristique tellus. Curabitur at risus sed risus cursus imperdiet. Etiam ac lorem eget tortor dictum feugiat id sit amet metus. Fusce bibendum pharetra odio vel auctor. Donec mattis imperdiet euismod. Morbi ac convallis dolor. Pellentesque dui est, consequat sed ante nec, ultricies volutpat enim. Donec vitae pulvinar dolor, at semper mi. Donec gravida a dolor ac blandit. Donec vel urna at purus tincidunt sodales. Maecenas laoreet elit at turpis sodales scelerisque. Phasellus sem urna, viverra sed odio ut, auctor sodales neque.
</div>
<div class="item2">
<a class="anchor" id="item2_anchor"></a>
Praesent interdum commodo accumsan. Etiam neque est, luctus ut finibus eu, lobortis id velit. Nullam id mi aliquam, aliquam dolor pellentesque, laoreet sem. Fusce suscipit erat at laoreet pulvinar. Pellentesque venenatis blandit ipsum in venenatis. Aenean at eros felis. Etiam fermentum vehicula consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sagittis sem vel dui consectetur hendrerit. Nulla fermentum dignissim dolor, in sollicitudin sem dictum in. Maecenas non mi justo. Aenean id commodo ipsum.
</div>
<div class="item3">
<a class="anchor" id="item3_anchor"></a>
Nunc condimentum risus bibendum lacinia ultrices. Suspendisse potenti. Phasellus scelerisque gravida diam, consectetur fermentum augue suscipit non. Phasellus ut augue ornare, congue sapien sed, cursus dui. Morbi congue dapibus felis, eu dapibus risus ornare nec. Proin eleifend enim et eros posuere posuere non blandit lacus. Quisque at lectus diam. Morbi facilisis accumsan diam ut tincidunt. Donec in tempus orci, eleifend convallis metus. Phasellus cursus magna nec purus varius, vitae cursus neque porta. Mauris malesuada dictum enim ut lobortis. Praesent porta metus eget efficitur aliquet. Duis vehicula augue a lorem interdum sollicitudin.
</div>
<div class="item4">
<a class="anchor" id="item4_anchor"></a>
Aliquam erat volutpat. Nulla sed mauris tellus. Pellentesque tristique eros ac urna faucibus vestibulum. Vivamus ac ante eget ante maximus commodo a vitae diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum nulla a molestie fringilla. Sed pharetra ac diam in facilisis. Sed ut ligula eu augue fermentum dictum. Suspendisse non accumsan enim, eget facilisis diam. Morbi a sapien at metus vulputate egestas id quis ante.
</div>所有的伟大工程，但我现在想向活动链接添加一个类，以便我可以在导航菜单中设置它的样式。
任何人都有一个例子吗？
看起来它应该可以工作，但它不会发生在我身上 – fightstarr20
现在所有的工作，我提供的示例代码与现场版本的区别。简单而重要的，谢谢！ – fightstarr20