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