html滚动到固定位置,监听页面滚动及滚动到指定位置

两种监听页面滚动的方法

一、原生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);

加动画的滚动

// 滚

两种监听页面滚动的方法 一、原生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); 加动画的滚动 // 滚
经验分享 程序员 微信小程序 职场和发展