function top() {
let currentPosition, timer
timer = setInterval(function () {
currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 10
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
}
}, 1)
} top()

  

js滚动条如何缓慢的回到顶部?的更多相关文章

  1. js+css实现点击回到顶部的效果(最低兼容至ie7)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq与js的写法,示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

  3. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  4. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  5. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  6. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  8. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  9. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

随机推荐

  1. Android灯光系统框架分析【转】

    本文转载自: 首先别人的APP要能直接访问到你写的硬件或者不经过任何修改的APP能直接使用你的驱动,就需要使用系统自带的JNI,所以我们需要写出符合系统自带JNI文件的HAL文件和驱动程序,下面具体分 ...

  2. MySQL 命令操作数据表

    MySQL 命令操作数据表 1.查看表信息 desc hs_user_credit_info; 2.新增表字段 alter table hs_credit_order add search_relat ...

  3. 【做题】Codeforces Round #453 (Div. 1) D. Weighting a Tree——拆环

    前言:结论题似乎是我的硬伤…… 题意是给你一个无向图,已知连接到每一个点的边的权值和(为整数,且属于区间[-n,n]),需要求出每条边权值的一个合法解(都要是在区间[-2*n^2,2*n^2]内的整数 ...

  4. Win32汇编学习(3):简单的窗口

    这次我们将写一个 Windows 程序,它会在桌面显示一个标准的窗口,以此根据代码来学习如何创建一个简单的窗口. 理论: Windows 程序中,在写图形用户界面时需要调用大量的标准 Windows ...

  5. OpenWRT路由器使用ipv6拨号上网教程

    文章来源于群友,如有侵权,请联系我(aha971030@gmail.com)删除 原理介绍分析: 湖北E信地区可以使用ipv6拨号,好处是网络是上下对等不限速网络,也就是说,你的端口上限是多少,网上就 ...

  6. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

  7. 1. AMQP 0-9-1模型简介(官网直译)

    关于这篇指导文档 本文提供了AMQP 0-9-1协议的一个概述,它是RabbitMQ所支持的协议之一. AMQP 0-9-1是什么 AMQP 0-9-1(Advanced Message Queuin ...

  8. _itemmod_exchange_item

    物品强化说明 表说明 `item`物品ID `exchangedItem` 升级后的物品ID `upFlag` 物品等级模式0或1,一般为0 `reqId` 需求ID `chance` 升级几率 `c ...

  9. unity 截图 压缩 处理

    /****************************************************** unity屏幕截图,并转换成Base64码* 作者: lyb* 日期:2017年7月25 ...

  10. Easyui使用心得(1)--DateGrid表格

    最近一直在用easyui这个控件,有一点心得,在这里和大家分享一下,也是对自己工作的一个小小的总结,希望可以形成一个完整的Easyui的笔记体系,可以方便更多的人 因为自己也是在摸索中前进,难免有遗漏 ...