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. eclipse添加tomcat运行环境

  2. java多线程模拟红绿灯案例

    代码Lighter.java: package pack1; /** * 灯线程 * @author Administrator * */ public class Lighter extends T ...

  3. For循环执行AFNetworking请求

    屏幕快照 2017-12-19 下午1.46.25.png 需求:如下操作打印的文档为 NSLog(@"开始");for(NSIntegeri =0; i <5; i++) ...

  4. [转]Java 8 Optional类深度解析(null处理)

    原文链接:http://www.importnew.com/6675.html 本文由 ImportNew - 高俊阳 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 身为一 ...

  5. 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

    在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...

  6. 2840 WIKIOI——评测

    2840 WIKIOI——评测 时间限制: 1 s 空间限制: 2000 KB 题目等级 : 白银 Silver       题目描述 Description Wikioi上有一题有N个测试点,时限为 ...

  7. 解析 MFC 中的 FromHandle

    MFC 对 Windows API 进行了封装,在很多方面都会提供便利.用 FromHandle 返回零时对象的指针,就可以调用各种类的方法.临时对象会在 OnIdle 中销毁.这里对 FromHan ...

  8. Hadoop集群_VSFTP安装配置

    原作者写的太好了,我这个菜鸟不自觉就转载了,原文链接:http://www.cnblogs.com/xia520pi/archive/2012/05/16/2503864.html 如果,您认为阅读这 ...

  9. 使用 Cosmos DB 创建和查询 NoSQL 表

    本教程演示如何使用 Azure 门户创建 Azure Cosmos DB 帐户,然后使用 DocumentDB .NET API 创建具有分区键的文档数据库和集合.通过在创建集合时定义分区键,应用程序 ...

  10. Flask应用运行流程

    当我们运行项目后,Flask内部都经历了什么 1.app.run()启动项目,ctrl点进源码 app.py: 1)执行了run_simple() 2)注意第三个参数,这里是Flask实例化的对象,在 ...