监听导航点击，滚动到相应位置

sunly_

已于 2023-04-22 15:57:51 修改

阅读量355

点赞数

分类专栏： jquery 文章标签： javascript 开发语言 ecmascript

于 2021-11-08 09:15:37 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/121201301

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种使用jQuery实现页面点击导航链接时平滑滚动到对应内容区域的方法，并在滚动过程中动态高亮当前可视区域的导航项。通过获取元素距离顶部的位置，监听点击和滚动事件，实现了流畅的滚动效果和导航指示。

摘要由CSDN通过智能技术生成

点击id=“nav”，页面滚动到class=“content”

$(document).on('click', '#nav', function () {
	$('html, body').animate({
		scrollTop:$('.content').offset().top,
	},1000)
});

1.获取页面各元素距离顶部距离,-100是减去导航条的高度

var htmlTop = 0;
var goodsTop = $('.content1').offset().top-100;
var aboutTop = $('.content2').offset().top-100;
var businessTop = $('.content3').offset().top-100;
var openTop = $('.content4').offset().top-100;

2.监听导航点击，滚动到相应位置

$('#nav .item').click(function(){
	let index = $(this).index();
	if(index == 0){
		$('html, body').animate({scrollTop:0},500)
	}else if(index == 1){
		$('html, body').animate({scrollTop:goodsTop},500)
	}else if(index == 2){
		$('html, body').animate({scrollTop:aboutTop},500)
	}else if(index == 3){
		$('html, body').animate({scrollTop:businessTop},500)
	}else if(index == 4){
		$('html, body').animate({scrollTop:openTop},500)
	}
})

3.滚多过后，对导航进行高亮显示

$(window).scroll(function(e){
	htmlTop = $(window).scrollTop();
	if(htmlTop == 0){
		$(".nav .item").eq(0).addClass("active").siblings().removeClass("active");
	}else if(htmlTop >= goodsTop && htmlTop < aboutTop){
		$(".nav .item").eq(1).addClass("active").siblings().removeClass("active");
	}else if(htmlTop >= aboutTop && htmlTop < businessTop){
		$(".nav .item").eq(2).addClass("active").siblings().removeClass("active");
	}else if(htmlTop >= businessTop && htmlTop < openTop){
		$(".nav .item").eq(3).addClass("active").siblings().removeClass("active");
	}else if(htmlTop >= openTop){
		$(".nav .item").eq(4).addClass("active").siblings().removeClass("active");
	}
});