var getTop = document.getElementById("get-top");
var head = document.getElementById("head");
getTop.onclick = function () {
var time = setInterval(function () {
document.body.scrollTop = document.body.scrollTop - 50;
if (document.body.scrollTop === 0) {
clearInterval(time);
}
}, 1); };
链接:https://segmentfault.com/q/1010000003855799

css3如何实现click后页面过渡滚动到顶部的更多相关文章

  1. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  2. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  3. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  4. WebForm 回传后如何保持页面的滚动位置

    转载自 http://www.cnblogs.com/renjuwht/archive/2009/06/17/1505000.html 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部.对 ...

  5. input禁止输入后,触发事件,在苹果手机的页面会滚动

    在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. ...

  6. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  7. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  8. h5空白页面过渡加载

    h5空白页面过渡加载 页面第一部分内容是图片,考虑到手机图片加载慢,想用简单.转化为base64的图片过渡 开始尝试将图片转为灰度图片,结果还是很大. 后来选取重要元素,保存2位的png,尺寸是494 ...

  9. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

随机推荐

  1. 黑马tomact学习二 tomcat的启动

  2. unicode官网 unicode码表和标准下载

  3. iOS开发 - 线程与进程的认识与理解

    进程: 进程是指在系统中正在运行的一个应用程序,比如同时打开微信和Xcode,系统会分别启动2个进程; 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内; 线程: 一个进程要想执行任务 ...

  4. Java | 基础归纳 | 静态方法与实例方法的区别

    静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...

  5. morhpia(4)-更新

    更新由2部分组成:一个查询和一组更新操作符.本例是跟所有薪水小于等于2000的员工涨工资500. @Test public void update() throws Exception { //第一步 ...

  6. python+selenium问题随记

    1.用PhantomJS跑程序,莫名遇到有些元素的text不能读取,后来发现,PhantomJS运行时也需要最大化,不是全屏模式的话也和界面浏览器一样会造成压盖无法读取信息,开始以为是PhantomJ ...

  7. KEIL_RTX资源介绍

    调度方法:时间片轮转. 参考文档:Keil参考手册和rtl.h(任务的每个.c文件都应包含此头文件)头文件这两个文档 1)事件管理:让一个进程等待一个事件,这个事件可以由其它进程和中断触发(只能在中断 ...

  8. WCF中的AsyncPattern

    WCF中的AsyncPattern   (系列博文源自 http://pfelix.wordpress.com/,由笔者翻译并整理,转载请注明) 在wcf 的 service contract中, 服 ...

  9. JAVA 时间的使用

    今天老师又没有讲新课,不过讲了练习题,扩展了一下我们的思维. 今天就讲一下如何获取时间吧. 代码: import java.util.* public class Test{ public stati ...

  10. vue之导入Bootstrap和Jquery

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...