JavaScript中錨點鏈接點擊平滑滾動并自由調整到頂部位置

本篇文章給大家分享的是有關JavaScript中錨點鏈接點擊平滑滾動并自由調整到頂部位置，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

錨點鏈接點擊平滑滾動并自由調整到頂部的位置

 一、添加錨點 注意a標簽用的nacTo 而不是href；

<ul>
	<li><a class="anchor" navTo="one">目標選擇</a></li>
	<li><a class="anchor" navTo="two">目標客戶</a></li>
	<li><a class="anchor" navTo="three">廣告形式</a></li>
	<li><a class="anchor" navTo="four">廣告投放</a></li>
	<li><a class="anchor" navTo="five">預算和時間安排</a></li>
	<li><a class="anchor" navTo="six">轉化追蹤</a></li>
</ul>

二、給右側需要滾動的內容添加對應的id

<div class="right">
			<div id="one">
				<div class="target">
					<i>您的目標是：</i>
					<div class="brand_engagement"><img src="img/signal.png" /><i>品牌參與度</i><b>更改</b></div>
					<p>我希望人們了解我的業務。</p>
					<div class="advertising_that">
						<img src="img/right.png" /> 廣告將顯示給最右可能瀏覽<b>您的廣告的人群。</b>
					</div>
				</div>
			</div>
			<div id="two">
				第二部分內容
			</div>
			<div id="three">
				第三部分內容
			</div>
			<div id="four">
				第四部分內容
			</div>
			<div id="five">
				第五部分內容
			</div>
		</div>

三、添加js,平滑滾動到頂部的距離 （150是導航的高度，可根據需要自由調整）

$('.anchor').click(function () {
		var navto = $(this).attr('navto');
		if (navto != "#") {
			var $div = $('#' + navto);
			var top = $div.offset().top || 0;
			$('html,body').animate({
				'scroll-top': top - 150
			}, 500);
		} else {
			$('html,body').animate({
				'scroll-top': 0
			}, 500);
		}
	});

以上就是JavaScript中錨點鏈接點擊平滑滾動并自由調整到頂部位置，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。