scrolltop | 易学教程

页面回到顶部的实现及原理

一、原理监听当前页面滚动事件当滚动到一定像素显示回到顶部的按钮给回到顶部按钮绑定点击事件，点击按钮让滚动条回到顶部并隐藏按钮二、实现代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>回到顶部demo</title> <style type="text/css"> .up{ position:fixed; bottom:20px; right:20px; width:10px; display:none; } </style> </head> <body> <div style="background:rgb(200,200,200);height:2000px;">我很长</div> <a id="up" href="javascript:;" class="up">回到顶部</a> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> //绑定页面滚动事件 $(window).bind('scroll'

Js中关于top、clientTop、scrollTop、offsetTop的用法

阅读更多关于 Js中关于top、clientTop、scrollTop、offsetTop的用法

网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; 1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj

Does WebKit have a clipping bug?

阅读更多关于 Does WebKit have a clipping bug?

问题 Given a region where the line-height and any margins are n , and the region has a height that is a multiple of n , and the scrollTop is increased by multiples of n I find that I get the result I expect in Firefox, Opera and NetFront but in Chrome (Windows), Safari (Mac) and the latest WebKit nightly (Mac) there is some leakage and I see partial lines. In my actual project (which I can't share) the effect is quite pronounced, but even in a reduced test case, the bottom of the previous line can

Trigger $(window).scroll();

阅读更多关于 Trigger $(window).scroll();

问题 When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that? I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success. The code EDIT: Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem. 回答1: Just use: // Trigger the scroll event $(window).scroll(); Source: http://www.w3schools.com/jquery/event_scroll.asp https://api.jquery.com

Update scroll position on resize of window

阅读更多关于 Update scroll position on resize of window

问题 I'm currently using a combination of smooth scroll and IDs/anchor tags to scroll to content on my site. The code below is getting the ID of the next 'section' in the DOM, and adding it's ID as the 'view next section' href, so once it's clicked, it'll scroll to the top of that div. Then, it iterates through, updating the href with the next ID each time etc until the last section is seen and it scrolls back to the top. Pretty straightforward. The only problem is that the 'sections' are

Animated switch between vertical full-height divs when scroll

阅读更多关于 Animated switch between vertical full-height divs when scroll

问题 I have three divs in one page with height 100vh each of them. So I want to make automatically switch between them, which will be activated when user scroll(up or down). I have written condition with scrollTop() function. For example: if($("#first").scrollTop() > 10){ /*go to next div automatically*/ } It works perfectly for first div, but scroll to top again impossible, because first condition always true. I haven't any idea. Please, help me. 回答1: This is a small code snippet that can help

Get scroll percentage in a dom container

阅读更多关于 Get scroll percentage in a dom container

问题 I have an app with content that should be loaded when the user scrolls down (like Twitter/Facebook...). I'm trying to detect when to load more data based on scroll events and the current scroll position. I've read this post: https://stackoverflow.com/a/3898152/82609 if($(window).scrollTop() + $(window).height() == $(document).height()) { console.error("bottom!"); } This nearly works but in my case when I scroll to the bottom I have $(window).scrollTop() + $(window).height() > $(document)

前端 PC端兼容性问题总结

阅读更多关于前端 PC端兼容性问题总结

1.如果图片加a标签在IE9-中会有边框　　解决方案: img{border:none;} 2.rgba不支持IE8 　　解决方案:可以用 opacity 　　 eg: opacity:0.7; /* FF chrome safari opera */ filter:alpha(opacity:70); /* 用了ie滤镜,可以兼容ie */ 　但是,需要注意的是,opacity会影响里面元素的透明度 3. display:inline-block ie6/7不支持　　解决方案: display:inline-block; *display:inline; 4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍如果处于无声明状态那么所有的ie浏览器margin-top加倍　　解决方案:用css给body添加magin属性为0px body{margin:0;} 5.IE 6.0 Firefox Opera等是真实宽度=width padding border 　IE5.X 真实宽度=width 　　解决方案: 　　方法1. div.content { 　　width : 400px ; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了　　voice-family : "\" } \""; //IE5

HTML文档坐标和视口坐标

阅读更多关于 HTML文档坐标和视口坐标

文档坐标和视口坐标　　视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px – 75px = 125px。　　如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。　　下面代码的getScrollOffsets方法获取滚动条位置： view source print ? 01 //以一个对象的x和y属性放回滚动条的位置 02 function getScrollOffsets(w){ 03 w = w || window; 04 //除了IE 8以及更早的版本以外，其他浏览器都支持 05 if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset}; 06 //对标准模式下的IE 07 var d = w.document; 08 if (document.compatMode == "CSS1Compat" ) 09 return {x: d

scrollTop([val])

阅读更多关于 scrollTop([val])

scrollTop([val]) 概述获取匹配元素相对滚动条顶部的偏移。广州大理石机械构件此方法对可见和隐藏元素均有效。参数 val String, Number V1.2.6 设定垂直滚动条值示例无参数描述: 获取第一段相对滚动条顶部的偏移 HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); 结果: <p>Hello</p><p>scrollTop: 0</p> 参数val 描述: 设置相对滚动条顶部的偏移 jQuery 代码: $("div.demo").scrollTop(300); 来源： https://www.cnblogs.com/furuihua/p/12002680.html

订阅 scrolltop