scrolltop

;Jquery: animate page down 100px from current screen position

由 ╄→尐↘猪︶ㄣ 提交于 2019-11-28 08:04:37
I need to animate a scroll from the current screen position, down a set number of pixels. $('html,body').animate({ scrollTop: $(window).position().top += 100 }); or? $('html,body').animate({ scrollTop: '+=100px' }); Just change: scrollTop: $('body').position().top += 100 To this: scrollTop: $(window).scrollTop() + 100 See demo: http://jsfiddle.net/fpxuC/ Check out the jQuery.ScrollTo plugin. You can do something like: $(...).scrollTo( '+=100px', 800 ); Check out the sample for everything this plugin can do: http://demos.flesler.com/jquery/scrollTo/ $('html,body').animate({ scrollTop: $(window)

js自定义滚动条代码

由 廉价感情. 提交于 2019-11-28 07:16:17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { height: 100%; margin: 0; } #container { position: absolute; top: 50px; left: 100px; height: 400px; width: 150px; background-color: aliceblue; padding: 2rem; box-sizing: border-box; /*必须属性，否则给scrollTop赋值无效*/ overflow-y: hidden; position: relative; padding-right: 30px; } .scrollbar { height: 50px; width: 10px; border-radius: 20px; background: #ccc; position: absolute

set scrollTop and scrollLeft without javascript

由 ぃ、小莉子 提交于 2019-11-28 06:52:48
I have a question about the scrollTop and scrollLeft properties. I would like to set these properties in my div without using JavaScript (jquery). Is this possible? My problem is, I have a program which interprets the HTML code and the divs which I scrolled have the value zero when the program interpret the code. The program can't read the scrollTop or scrollLeft value. Exists a HTML-tag like: <div scrollLeft="300" scrollTop="200"></div> insertusernamehere I'm afraid that this is not possible using CSS/HTML only. Edit [05.01.2012] - A possible solution I created a solution that works in the

vue 上拉加载更多示例代码

由 佐手、 提交于 2019-11-28 05:45:36
vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断，直接放在 onReachBottom 周期即可。 html <div id="app"> <div class="integralPage"> <div class="itemList"> <div class="itemBox" v-for="(item, index) in list" :key="index"> <div class="info"> <div class="title">{{item.title}}</div> <div class="time">{{item.time}}</div> </div> <div class="num">{{item.num}}</div> </div> </div> <div class="laodMore"> <div v-show="logStatus === 0"> <div>上拉加载</div> </div> <div v-show="logStatus === 1"> <div>正在加载</div> </div> <div v-show="logStatus === 2"> <div>没有更多数据了</div> </div> </div> </div> </div> js const obj = { el: '#app', data: {

javascript图片懒加载

由 孤者浪人 提交于 2019-11-28 05:29:33
1.啥是图片懒加载 也就是 图片在浏览器可以看到的范围内 把图片加载出来 2.为啥要懒加载 因为要减少请求加载 优化速度 3.首先 我们要forEach循环所有图片 把所有图片加载一遍 lazyRender()function lazyRender() { $('.cover img').each(function () { 4.在循环里面进行一系列判断 if (checkShow($(this)) && !isLoaded($(this))) { loadImg($(this)); } }) } 5.我使用了两个方法来进行判断是否让他显示加载出的图片 checkShow($(this) 和 !isLoaded($(this)) 6.第一个方法 根据浏览器的自身高度 和 当前位置距离浏览器的高度 以及 每个图片距离浏览器顶部的高度 function checkShow($img) { // 传入一个img的jq对象 var scrollTop = $(window).scrollTop(); //页面向上滚动的距离 var windowHeight = $(window).height(); // 浏览器自身高度 var offsetTop = $img.offset().top; //每张图片距离头部的距离 if(offsetTop < (scrollTop +

博客园自定义皮肤

由 半世苍凉 提交于 2019-11-28 05:28:12
一、背景 在园子里浪迹有很长一段时间了，里面遇到了很多大神，学习了很多知识，也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧，在园子这么久，很少发布博文。主要原因是自己有点懒，其他的客观原因也就不说了，每个人都有自己当时的想法。结果现在就有一种“我虽在江湖，但江湖没有我的传说”的尴尬，本着“迟到比不到好”的思想，就想着在这里记录一下自己平凡的学习成长历程，也希望能帮助园友们避免我踩过的坑。 之前在逛园子的时候，就发现有些博主的主题很好看，查找了一些攻略，根据自己的喜好，简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客，可以跟我一起，需要有css基础。 二. 定制自己的博客 1、准备工作 先在博客主页依次点击“ 管理 ”=》“ 设置 ”，下面找到“ 申请JS权限 ”，等待审核，审核通过之后才能，定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式，我觉得站在巨人的肩上，一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”]，每个人的爱好不一样，你可以选择你喜欢的皮肤进行修改，不过下面的一些样式可能需要做一些修改，具体看你想要怎么展示。 自定义主题样式操作，对于你不满意的元素，你可以在该页面按F12调出Debug工具，然后对该元素的css进行修改，调整满意之后

H5中滚动到底部的事件

由 孤人 提交于 2019-11-28 05:26:29
问题：在H5中，我们有这样的需求：例如有列表的时候，滚动到底部时，需要加载更多。 解决方案：可以采用window的滚动事件进行处理 分析：如果滚动是针对整个屏幕而言的（不针对于某个界面小块），那么这个应该是是成立的：屏幕的高度+最大滚动的距离 = 内容的高度 代码实现： <html> <head> <meta charset="UTF-8"> <title>监听滚动到底部滚动底部</title> <style> .div2{ width:100px; height:100px; border:1px solid red } *{ margin:0 } .button1:active{ background:red } body{ height:375px; width:667px; border:1px solid red } .div1{ height:600px; width:100%; background:red } .div2{ height:600px; width:100%; background:green } .div3{ height:600px; width:100%; background:blue } .div4{ height:600px; width:100%; background:yellow } </style> </head> <body >

Run ScrollTop with offset of element by ID

由 陌路散爱 提交于 2019-11-28 05:12:05
Trying to make the browser scroll to a specific ID with an added offset - $('html, body').animate({scrollTop: $('#contact').offset().top}, 'slow'); What I need to do is to set the offset by -100px. How can I accomplish this? No magic involved, just subtract from the offset top of the element $('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow'); Rai Ahmad Fraz var top = ($(".apps_intro_wrapper_inner").offset() || { "top": NaN }).top; if (!isNaN(top)) { $("#app_scroler").click(function () { $('html, body').animate({ scrollTop: top }, 100); }); } if you want to scroll a

jQuery scrollTop not working inside iframe on iOS

由 百般思念 提交于 2019-11-28 04:10:19
问题 iOS and iframes.. such a pain. I've a simple back to top button which should animate the scrolling (instead of just jumping to the top of the page). $(document).on('click touchstart', '.backtotop', function() { $('html, body').animate({ scrollTop: 0 }, 1500); }); This works everywhere, except for iframes on iOS. I still haven't fully understood how iOS handles iframes. jQuery's .scrollTop() function won't work either (which can't be animated anyway). The only thing which works in iframes on

JS实现网站楼层导航效果

由 只愿长相守 提交于 2019-11-28 01:47:36
壹 ❀ 引 我在angularjs中使用锚点这篇文章中，踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能；但对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。 由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果： 贰 ❀ 实现思路 第一点，因为是由滚动触发的楼层判断，所以肯定离不开 onscroll事件 。 第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，此距离会不断缩小，当接近到某个距离时我们判定此楼层入画，当然其它楼层都满足此判定。 而JQ提供了一个 offset().top 方法能获取这个值，js中只有一个offsetTop属性，获取的是 距离自己最近position属性为非static的祖先元素的距离 ，此 距离不随滚动条滚动而缩小 。 当然我们有方法模拟计算出 offset().top 的值，但没必要，如果你对JQ的offset().top与js的offsetTop有什么区别，以及对如何模拟出JQ的offset().top的值有兴趣，可以参照博主这篇文章 JQ的offset().top与js的offsetTop区别详解 。 这里我直接引用了我之前博客得到的结论： offset().top = offsetTop
订阅 scrolltop