JS中錨點鏈接點擊平滑滾動并自由調整到頂部位置
更新時間:2021年02月06日 16:35:40 作者:是這樣的三月
這篇文章主要介紹了JS中錨點鏈接點擊平滑滾動并自由調整到頂部位置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
錨點鏈接點擊平滑滾動并自由調整到頂部的位置
一、添加錨點 注意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>我希望人們了解我的業(yè)務。</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是導航的高度,可根據(jù)需要自由調整)
$('.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);
}
});
ok啦~ 效果展示

到此這篇關于JS中錨點鏈接點擊平滑滾動并自由調整到頂部位置的文章就介紹到這了,更多相關js錨點鏈接平滑滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程
這篇文章主要介紹了微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程的相關資料,需要的朋友可以參考下2016-10-10
element必填校驗輸入空格問題修改正則表達式、請求攔截器實現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗輸入空格問題修改正則表達式、請求攔截器實現(xiàn)所有輸入框去除首尾空格,本文通過圖文實例代碼相結合給大家講解的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02

