原生js实现返回顶部缓冲效果资源-CSDN文库

js代码

scrolltop

194 浏览量 2020-11-29 03:19:09 上传评论收藏 36KB PDF 举报

资源推荐

资源详情

资源评论

原生原生js实现返回顶部缓冲效果实现返回顶部缓冲效果

运行原理运行原理

通过定时器30毫秒执行一次滚动条上升，每次上升的高度为当前高度的80%，这样就达到了上升缓冲的动画效果。

判断当滚动条高度超过一屏时，按钮显示，默认隐藏

知识要点知识要点

scrollTop//获取滚动条高度需要写兼容

clientHeight//可视窗口高度需要写兼容

setInterval//定时器

window.onscroll//滚动触发事件

完整代码完整代码

<!DOCTYPE html>

<head>

<style>

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:courier new,courier,monospace;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:none;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}

table{border-collapse:collapse;border-spacing:0;}

.clear{clear: both;float: none;height: 0;overflow: hidden;}

.bg{background:#9B1BC5; width: 1000px; height: 3000px; margin: 0 auto;}

#gotop{width: 50px; height: 50px; background:#5490F5; color: #fff; position: fixed; left: 50%; bottom: 30px; text-align: center; font-family: "Microsoft

Yahei",tahoma,arial; font-size: 14px; cursor: pointer; margin-left: 520px; display: none;}

#gotop span{display: block;padding: 5px;}

</style>

</head>

<body>

//在页面加载完后立即执行多个函数方案

function addloadEvent(func){

var oldonload=window.onload;

if(typeof window.onload !="function"){

window.onload=func;

}

else{

window.onload=function(){

if(oldonload){

oldonload();

}

func();

}

//在页面加载完后立即执行多个函数方案结束

addloadEvent(b);

function b(){

var gotop=document.getElementById("gotop");

var timer;

var tf=true;

//滚动触发

window.onscroll=function(){

//获取滚动条高度

var ostop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

//获取窗口可视区域高度

//console.log(ostop)

var ch=document.documentElement.clientHeight||document.body.clientHeight;

//如果页面超过一屏高度按钮显示，否则隐藏

if(ostop>=ch){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38644599

粉丝: 11
资源: 904

原生js实现返回顶部缓冲效果

JS实现带动画的回到顶部效果

jQuery 缓冲返回网页顶部JS代码

原生js实现精美放羊动画效果

原生js实现淘宝放大镜效果

原生js实现可拖拽进度条效果

原生JS实现的平滑返回顶部特效源码.zip

原生js实现jquery函数animate()动画效果的简单实例

基于原生JavaScript实现的扫雷小游戏.zip

原生JS 实现贪吃蛇

原生JS实现的图片切换效果

原生js实现动态指针时钟效果

原生JS实现树叶数字时钟效果源码.zip

原生js实现jquery $.extend方法

AutoType原生JavaScript实现的自动打字效果

原生JS实现列表内容自动向上滚动效果

原生js实现图片放大镜效果

原生JavaScript实现淘宝放大镜效果

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

NPPJSONViewer.zip

GD32替换STM32注意事项.pdf

XCP协议的规范文档

VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi

CANoe通过CAPL脚本实现自动测试

蓝牙BLE协议中文版.pdf

BaiduOCR.zip

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）