要使用jQuery为导航锚点链接添加滑动效果，你可以使用animate函数来平滑滚动到目标元素的位置。以下是一个简单的例子：
HTML结构:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smooth Scroll Navigation</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </nav> <div id="section1" class="section">Section 1 Content</div> <div id="section2" class="section">Section 2 Content</div> <div id="section3" class="section">Section 3 Content</div> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="script.js"></script> </body> </html>
CSS样式 (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
padding: 10px;
position: fixed;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.section {
height: 500px;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
}
JavaScript代码 (script.js):
$(document).ready(function() {
// 监听导航链接的点击事件
$('nav a').on('click', function(event) {
event.preventDefault();
// 获取目标元素的ID
const targetId = $(this).attr('href');
// 使用animate函数平滑滚动到目标元素的位置
$('html, body').animate({
scrollTop: $(targetId).offset().top
}, 1000); // 1000表示滚动的时间，以毫秒为单位
});
});
在这个例子中，当导航链接被点击时，阻止默认行为（页面跳转），获取目标元素的ID，并使用animate函数滚动到目标元素的位置。你可以根据需要调整滚动的速度和其他参数。确保在HTML文件中引入jQuery库。
本站资源均来源于互联网，仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：让 jquery 导航锚点链接产生滑动效果
