scrolltop

javascript三大家族：offset属性 scroll属性 client属性

由 孤街醉人 提交于 2019-12-07 17:16:29
(1)offset属性： 1.1 offsetWidth = width + border + padding 1.2 offsetHeight = height + border + padding 1.3 offsetTop = 元素相对于浏览器顶部的距离 1.4 offsetLeft = 元素相对于浏览器左边的距离 功能：只读（获取）不写（设置） 1.5 子元素的offsetTop和offsetLeft： 关键看父元素是否设置了定位，若有则相对于父元素的上边框和左边框的距离； 若没有则相对于浏览器顶部和左边的距离。 1.6 offsetParent:嵌套关系的标签，默认选中的是body，若父元素添加了定位，则选中的是父元素。 如big标签下是small标签，var ele = small.offsetParent;console.log(ele) (2)scroll属性： 2.1 scrollWidth = width + padding-left + padding-right 2.2 scrollHeight = height + padding-top + padding-bottom 2.3 scrollTop = 滚动条滚动之后相对于浏览器顶部的距离 2.4 scrollLeft = 滚动条滚动之后相对于浏览器左边的距离 2.5 根元素引用scrollTop属性

Jquery .scrollTop() not working

由 杀马特。学长 韩版系。学妹 提交于 2019-12-07 13:06:31
问题 The title explains my problem. So here's my code: $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight); #my-div get filled using AJAX. So in my ajax request, I've got a success callback which performs the above code: $.ajax({ url: 'getLog.php', data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>" success: function(data){ $("#my-div").html(data); // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes $("#my-div ul").scrollTop($("#my-div ul")[0]

Get vertical position of scrollbar for a webpage on pageload when the url contains an anchor

由 喜你入骨 提交于 2019-12-07 12:05:09
问题 I am using jQuery's scrollTop() method to get the vertical position of the scroll bar on pageload. I need to get this value after the anchor in the url is executed (ex url: www.domainname.com#foo). I can use the following code and it works in Firefox and IE: ex url: www.domainname.com#foo $(document).ready(function() { if ($(this).scrollTop() > 0) { // then a conditional statement based on the scrollTop() value if ($(this).scrollTop() > $("#sidenav").height()) { ... But in Safari and Chrome

jQuery学习第三天（特殊属性及事件机制）

由 浪子不回头ぞ 提交于 2019-12-07 01:54:51
jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $ ( "#name" ) . val ( “张三” ) ; //获取值 $ ( "#name" ) . val ( ) ; 【案例：京东搜索.html】 $(function () { //console.log($("#btn").val()); //$("#btn").val("哈哈"); //console.log($("#btn").attr("value")); //$("#txt").val("123"); $("#txt").focus(function () { //如果是默认值，清空内容 if($(this).val() === "洋酒"){ $(this).val(""); } }); $("#txt").blur(function () { if($(this).val() === ""){ $(this).val("洋酒"); } }); }); html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $ ( “div” ) . html ( “ < span > 这是一段内容 < / span > ” ) ; //获取内容 $ ( “div” ) . html ( )

vue路由跳转时进入新的页面，但位置却不在顶部

由 怎甘沉沦 提交于 2019-12-06 20:33:02
（1）问题背景 路由跳转时进入新的页面，但位置却不在顶部，而是在上个页面浏览的位置，在每次进入新页面时，想让它定位在页面的顶部。 方式一 main.js router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 next() }) 每次点击分页的时候，页面也会停留在之前浏览的位置，在调完接口后也加入下面几行代码就好了。 // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 方式二 router-index.js const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 return { x: 0, y: 0 } } }) 亦或是 scrollBehavior (to, from,

右下角悬浮框案列

由 [亡魂溺海] 提交于 2019-12-06 16:55:11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右下角悬浮框案列</title> <style> body{ height: 2000px; } #div1{ width: 200px; height: 150px; background: red; position: absolute; right: 0; bottom: 0; } </style> <script> window.onscroll =function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop) var oDiv =document.getElementById('div1'); //oDiv.offsetHeight 获取div的高度 oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight +scrollTop +'px' } </script> </head> <body> <div id="div1"> </div> </body> </html> 　分析图

jQuery实现返回顶部

由 牧云@^-^@ 提交于 2019-12-06 10:46:37
jQuery实现返回顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> .back_top{ position: fixed; background:gray; color: #ffffff; padding: 5px; bottom: 30px; right: 30px; width: 42px; text-align: center; cursor: pointer; } </style> </head> <body> <div> <h1>我是顶部</h1> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>

android 3.0: JS scrollTop not working on chrome/webview

由 本秂侑毒 提交于 2019-12-06 09:50:20
I've written an app wrap by a webView, it work as expected on my milestone2 2.2 but the scrolling functions is not working on 3.0's chrome(work in FF) neither by dom.scrollTop = XXX nor jquery $("#id").scrollTop(X) is it a bug? anyone can suggest how I fix it, thx! my tablet is Acer ICONIA TAB A500 with Android 3.0.1 I've experienced a similar deficiency in Android browser. The way I worked around this problem was to use $(window).scrollTop(x); or window.scrollTo(x,0); The reason this works is that scrollTo is usually supported in Android browser for the window even when scrollTo is not

vue 中固定导航栏

由 百般思念 提交于 2019-12-06 04:07:45
点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () { // 点击回顶按钮 返回顶部 setTimeout(()=>{ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 },1000) } } } window.onscroll = function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop const goTop= document.querySelector('.gotop-box') if (scrollTop >200) { goTop.style.display = 'block' } else { goTop.style.display = 'none' } } </script> <style lang="css"> .topIcon { position: fixed;

微信小程序开发（技术篇）

由 岁酱吖の 提交于 2019-12-06 04:07:07
技术篇，有些是我自己学的，有些是我们公司的全栈大神教的，还有些就是各种百度的。 会持续更新，每天写一点。 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 2017/11/17 1、表单控件需要用户填写信息，点击提交，当信息为空时，顶部跳出提示，侧边出现警告图标。 效果如下： 代码如下： wxml 1、首先在顶部加入条件渲染的<view>组件，用的样式是引入的weui的，渲染条件是showTopTips为true是显示，显示的内容是{{warn_text}}。 <view class="weui-toptips weui-toptips_warn"wx:if="{{showTopTips}}"> {{warn_text}}</view> 2、在<input>组件后插入需要条件渲染的警告图标<icon>，外面用<view>套起来。样式同样是weui的，渲染条件是is_warn1为true。 （注意：姓名栏的警示图标的渲染条件是is_warn1
订阅 scrolltop