scrolltop

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(dis > 120){ this.flag = true }else{ this.flag = false } }, 一般给window绑定监测事件就能获得window.pageYOffset滚动距离。 2.有些时候给body设置了{width:100%,height:100%}，之后就需要将事件绑定在document.body，才能获得document.body.scrollTop滚动距离。 2.1PC端IE/edge有滚动事件但通过document.body.scrollTop获取不到数值。 2.2移动端火狐浏览器这样设置没问题也能获取document.body

css *{margin: 0;padding: 0;} /* 显示区域 */ #content{height: 4800px;width: 800px;border: 1px solid #333;margin: 0 auto;position: relative;background: url("../img/1.jpg");} /* 回到顶部的按钮 */ #backTop{position: absolute;right: -50px;top: 500px;height: 50px;width: 40px;border: 1px solid #333;text-align: center;line-height: 50px;cursor: pointer;display: none;} html <div id="content"> <div id="backTop">顶部</div> </div> javascript var backTop = document.getElementById('backTop'); var scrollTimer; var flag = true; document.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document

window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 封装 兼容滚动条方法 function getScrollOffset ( ) { if ( window . pageXOffset ) { return { x : window . pageXOffset , y : window . pageYOffset } } else { return { x : document . body . scrollLeft + document . documentElement . scrollLeft , y : document . body . scrollTop + document . documentElement . scrollTop } } } 来源： https://blog.csdn.net/weixin_42448623/article/details/102754674

css *{margin: 0;padding: 0;} #box{height: 1200px;width: 100%;} #topNav{width: 100%;height: 80px;background: #333;position: fixed;top:-80px;} html <div id="box"> <div id="topNav"></div> </div> javascript window.onload = function(){ window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop > 200){//当滚动条滑动了200以后，吸顶菜单缓缓出现，否则吸顶菜单缓缓消失 navMove(); }else{ navMove2(); } } var topNav = document.getElementById('topNav'); //顶部banner缓缓出现 function navMove(){ var curTop = topNav.offsetTop; var navTopTimer = setInterval(function(){ curTop += 2; if

背景 今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 对应列表中的数据需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。简单的处理了一下， 问题顺利解决， 就把这个小技巧分享一下给大家。 正文 有几种不同的方式来解决这个小问题。 1.scrollTop 第一想到的还是scrollTop, 获取元素的位置， 然后直接设置: // 设置滚动的距离 element.scrollTop = value; 不过这样子有点生硬， 可以加个缓动： var scrollSmoothTo = function (position) { if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { return setTimeout(callback, 17); }; } // 当前滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动step方法 var step = function () { // 距离目标滚动距离 var distance = position - scrollTop; //

I am creating a mobile web app with jQuery Mobile and would like to hide the search bar above the visible area. So the user would need to pull the page down to see the search bar. I'm thinking the best way to do that is to define the search bar as usual then on page load manually set the scroll position, say down 55px. Here's my code: $(document).ready( function() { $("html,body").scrollTop(55); } The problem is, I can see upon refreshing the page it is hidden from view, but once it has fully loaded it immediately jumps back to the top. jQuery Mobile is the culprit, as it doesn't occur with

I'm using the scrollTop function to create a parallax scrolling website, binding the scrollTop function to different anchors throughout my website. The problem I'm having is that the scrolling becomes really choppy/jerky in Chrome, but somehow its fine in Firefox. My code is as follows: $('.recipes').click(function(){ $('html,body').animate({ scrollTop: $(".main1").offset().top }, 1500); }); $('.cooking').click(function(){ $('html,body').animate({ scrollTop: $(".main2").offset().top }, 1500); }); Is there possibly an alternate way to do this so the website scroll isn't as jerky? maybe an