关于锚点平滑跳转（同页面）、导航跟随页面滚动并自动高亮显示

最新推荐文章于 2023-04-12 18:32:15 发布

GLyihu

最新推荐文章于 2023-04-12 18:32:15 发布

阅读量6.4k

点赞数 8

本文链接：https://blog.csdn.net/GLyihu/article/details/95943988

版权

根据标题的意思，大概有两个知识点：

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下相关操作与插件

https://www.zhangxinxu.com/wordpress/2010/07/%E9%94%9A%E7%82%B9%E8%B7%B3%E8%BD%AC%E5%8F%8Ajquery%E4%B8%8B%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C%E4%B8%8E%E6%8F%92%E4%BB%B6/

页面比较长,所以用锚点做了个导航跟随页面往下滚动,如何能让页面到达锚位置的时候,自动高亮显示呢

https://zhidao.baidu.com/question/432816409157065444.html

GLyihu

关注

8
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
关于锚点平滑跳转（同页面）、导航跟随页面滚动并自动高亮显示

根据标题的意思，大概有两个知识点：1、锚点在页面里平滑跳转，无网址后面的#什么的，地址栏里只会看到默认网址2、锚点随着页面滚动定位，并高亮定位的锚点直接上代码，不懂的朋友可以复制粘贴到本地查看。js部分$(function() { $(window).scroll(function() { //为页面添加页面滚动监听事件 var wst = $(window).scr...
复制链接

扫一扫