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. struts工作原理

    在struts2的应用中,从用户请求到服务器返回相应响应给用户端的过程中,包含了许多组件如:Controller.ActionProxy.ActionMapping.Configuration Man ...

  2. ios wkwebview同步cookie ajax请求偶尔异常问题

    let config = WKWebViewConfiguration.init() config.preferences = WKPreferences.init() config.preferen ...

  3. STP-2-三个选择

    1.选择根交换机 2.确定根端口 3.确定指定端口     1.选择根交换机   stp中只有一台交换机能成为根(Root),每台交换机按自己的STP逻辑,先发一个hello称自己为根,如果收到了比自 ...

  4. c# 参数传递问题(形参与实参)

    形参是指被调用方法中的参数 实参是指传递给方法的参数 (1)值类型传参是按值传递 值类型传参,形参接受到的是实参的一个副本,即形参发生变化,实参不会发生任何变化 (2)引用类型参数按值传递 当参数传递 ...

  5. redis 的操作

    redis Redis(Remote Dictionary Server)是一个开源使用的非关系型数据库 通常被称为数据结构服务器,因为值可以是字符串,哈希,列表,集合,有序集合 优势 ​ 性能极高, ...

  6. UVa-11582:Colossal Fibonacci Numbers!(模算术)

    这是个开心的题目,因为既可以自己翻译,代码又好写ヾ(๑╹◡╹)ノ" The i’th Fibonacci number f(i) is recursively defined in the f ...

  7. .Net应用导入、导出Excel文件

    本次阐述的导入和导出都围绕此Demo进行

  8. Django中多表的增删改查操作及聚合查询、F、Q查询

    一.创建表 创建四个表:书籍,出版社,作者,作者详细信息 四个表之间关系:书籍和作者多对多,作者和作者详细信息一对一,出版社和书籍一对多 创建一对一的关系:OneToOne("要绑定关系的表 ...

  9. Android 如何通过Retrofit提交Json格式数据

    本文将介绍如何通过retrofit库post一串json格式的数据.首先post的json数据格式如下: { "Id": "string", "Dev ...

  10. apache下设置域名多站点访问及禁止apache访问80端口

    apache下设置域名多站点访问 当前系统:macOS High Sierra 域名访问配置指定端口后,不同域名只能配置不同的端口 apache配置目录: sudo vim /etc/apache2/ ...