一、原生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元素

錨點1

總結

以上是生活随笔為你收集整理的监听某个区域滚动_监听页面滚动及滚动到指定位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。