html 平滑滚动到页面的不同部分的链接

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 平滑滚动到页面的不同部分的链接相关的知识,希望对你有一定的参考价值。

$('.scroll-to').click(function(e) {

	var thisHref = $(this).attr("href");
	var thisPos = $(thisHref).offset().top;
	var thisAttrScrollOffset = $(this).attr('data-scrolloffset');
	var thisOffset;
		if (typeof thisAttrScrollOffset !== typeof undefined && thisAttrScrollOffset !== false) {
			thisOffset = +$(this).attr('data-scrolloffset');
		} else {
			thisOffset = 0;
		}
	var thisScroll = thisPos - thisOffset;

	if ( thisHref === "" ) {

		alert( "ATTENTION: This link has a scroll-to class. You need to add a href attribute value for this scroll-to link to function correctly. Make sure the href attribute value starts with a '#'" );

	} else {

		$("html, body").animate( { scrollTop: Math.ceil( thisScroll ) }, 800 );

	}

	e.preventDefault();

});
<a class="scroll-to" href="#intro" data-scrolloffset="70" role="button">Introduction</a>

以上是关于html 平滑滚动到页面的不同部分的链接的主要内容,如果未能解决你的问题,请参考以下文章

如何通过平滑滚动重定向到不同页面上的特定 div

为wordpress添加平滑滚动和滚动间谍功能

通过平滑滚动重定向到不同页面上的 div?

为啥平滑滚动在滚动之前会闪烁?

CSS 类取决于页面位置

将溢出的 divv 平滑滚动到其中的特定位置[重复]