根据标题的意思,大概有两个知识点:
1、锚点在页面里平滑跳转,无网址后面的#什么的,地址栏里只会看到默认网址
2、锚点随着页面滚动定位,并高亮定位的锚点
直接上代码,不懂的朋友可以复制粘贴到本地查看。
js部分
$(function() {
$(window).scroll(function() {
//为页面添加页面滚动监听事件
var wst = $(window).scrollTop() //滚动条距离顶端值
for (i = 1; i < 6; i++) { //加循环
if ($("#a" + i).offset().top <= wst) { //判断滚动条位置
$('#nav a').removeClass("c"); //清除c类
$("#a" + i + i).addClass("c"); //给当前导航加c类
}
}
})
$('#nav a').click(function() {
$('#nav a').removeClass("c");
$(this).addClass("c");
});
});
$(".smooth").zxxAnchor({
anchortag: "href"
});
js之前链接js库(一共两个,一个是jquery,大家都懂的。一个是jquery.anchor.1.0.js,锚点平滑跳转和无后缀)
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.zhangxinxu.com/study/js/jquery.anchor.1.0.js" type="text/javascript" charset="utf-8"></script>
html部分
<div id="nav">
<a id="a11" href="#a1" class="smooth c">书籍目录</a>
<a id="a22" href="#a2" class="smooth">作品试读</a>
<a id="a33" href="#a3" class="smooth">购买须知</a>
<a id="a44" href="#a4" class="smooth">注意事项</a>
<a id="a55" href="#a5" class="smooth">用户点评</a>
</div>
<div id="p">
<div id="a1">书籍目录</div>
<div id="a2">作品试读</div>
<div id="a3">购买须知</div>
<div id="a4">注意事项</div>
<div id="a5">用户点评</div>
</div>
css部分
.c {
color: red;
}
#nav {
position: fixed;
width: 100%;
height: auto;
background: #ffc;
overflow-y: auto;
min-height: 60px;
line-height: 60px;
}
#p {
margin-bottom: 50rem;
}
#p div {
height: 30rem;
}
说了这么多,主要是为了大家看的方便。直接上所有内容,大家可以直接拷贝粘贴,本地测试吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c {
color: red;
}
#nav {
position: fixed;
width: 100%;
height: auto;
background: #ffc;
overflow-y: auto;
min-height: 60px;
line-height: 60px;
}
#p {
margin-bottom: 50rem;
}
#p div {
height: 30rem;
}
</style>
</head>
<body>
<div id="nav">
<a id="a11" href="#a1" class="smooth c">书籍目录</a>
<a id="a22" href="#a2" class="smooth">作品试读</a>
<a id="a33" href="#a3" class="smooth">购买须知</a>
<a id="a44" href="#a4" class="smooth">注意事项</a>
<a id="a55" href="#a5" class="smooth">用户点评</a>
</div>
<div id="p">
<div id="a1">书籍目录</div>
<div id="a2">作品试读</div>
<div id="a3">购买须知</div>
<div id="a4">注意事项</div>
<div id="a5">用户点评</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.zhangxinxu.com/study/js/jquery.anchor.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
//为页面添加页面滚动监听事件
var wst = $(window).scrollTop() //滚动条距离顶端值
for (i = 1; i < 6; i++) { //加循环
if ($("#a" + i).offset().top <= wst) { //判断滚动条位置
$('#nav a').removeClass("c"); //清除c类
$("#a" + i + i).addClass("c"); //给当前导航加c类
}
}
})
$('#nav a').click(function() {
$('#nav a').removeClass("c");
$(this).addClass("c");
});
});
$(".smooth").zxxAnchor({
anchortag: "href"
});
</script>
</body>
</html>
参考资料:
关于锚点跳转及jQuery下相关操作与插件
页面比较长,所以用锚点做了个导航跟随页面往下滚动,如何能让页面到达锚位置的时候,自动高亮显示呢