监听某个区域滚动_监听页面滚动及滚动到指定位置

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

监听某个区域滚动_监听页面滚动及滚动到指定位置相关推荐

js调整数组某些元素到指定位置顺序_如何在JS数组特定索引处指定位置插入元素？...
如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组 var array = ["one& ...
java 边读边写文件_文件操作--边读边写,在指定位置添加内容(避免乱码)
[java]代码库/** * @param lineNumber 选择要添加内容的行数 * @param attribute1 选择要添加的内容1 * @param attribute2 选择要添加的 ...
java 控制台移动光标_如何使控制台中光标移动到指定位置？
Its_forever package interfaces; import java.util.Scanner; public class Test { public static void mai ...
vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮
###菜单滚动吸顶效果: ###html: <section class="switchModule" id="switchModule">< ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
html 页面自动滚动,js监听html页面的上下滚动事件方法
最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: Dom ...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
RecyclerView跳转到指定位置，RecyclerView上下滑动监听，RecyclerView滑动速度
1.RecyclerView跳转到指定位置只需调用recycleview的置顶方法: recyclerView.scrollToPosition(15); 如果你需要让第15item在屏幕居中,只需 ...

监听某个区域滚动_监听页面滚动及滚动到指定位置

监听某个区域滚动_监听页面滚动及滚动到指定位置相关推荐

最新文章

热门文章