溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
兩種監聽頁面滾動的方法
一、原生js通過window.onscroll監聽
window.onscroll = function() {
//為了保證兼容性，這里取兩個值，哪個有值取哪一個
//scrollTop就是觸發滾輪事件時滾輪的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滾動距離" + scrollTop);
}
二、Jquery通過$(window).scroll()監聽
$(window).scroll(function() {
//為了保證兼容性，這里取兩個值，哪個有值取哪一個
//scrollTop就是觸發滾輪事件時滾輪的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滾動距離" + scrollTop);
})
將頁面滾動到指定位置
主要使用的是錨點技術，錨點元素通過scrollTop值改變進行定位。
錨點
錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣，是一種頁面內的超級鏈接。
法一 直接使用scrollTop
使用scrollTop方法，x為滾輪的高度
$("body,html").scrollTop(x);
加動畫的滾動
// 滾動到指定位置
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
// 滾動到頂部，指定距頂部的距離
$('.scroll_top').click(function(){
$('html,body').animate({
scrollTop: '0px'
}, 800);
});
方法二 利用hash
hash
hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。
location.hash=anchorname。
例如：以下地址的hash為#hot
http://this.summer.io/is/#hot // location.hash → #hot
以下函數將頁面定位到title元素
function aa(){
window.location.hash = "#title";
}
法三 直接使用超鏈接錨點
點擊a標簽頁面將會定位到anchor1元素
<a href="#anchor1">錨點1</a>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
