脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS返回顶部

JS返回顶部实例代码

 更新时间：2020年08月09日 10:48:59   作者：数星星的咚咚咚  
这篇文章主要为大家详细介绍了JS返回顶部实例代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS返回顶部实例代码，供大家参考，具体内容如下

html/css部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="返回顶部效果.js"></script>
<style>
 .container{
 width:1190px;
 margin: 0px auto;
 }
 .container a{
 display: none;
 width:40px;
 height:40px;
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 position: fixed;
 left:95%;
 bottom: 50px;
 }
 .container a:hover{
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 background-position: left -40px;
 }
</style> 
</head>
<body>
 <div class="container">
 <img src="/535e0ce800015b7511902787.jpg" alt="">
 <a id="btn" href="javascript:" class="btn" title="回到顶部"></a>
 </div>
</body>
</html>

JS部分

window.onload=function(){
 var obtn=document.getElementById("btn");
 var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
 var isTop=true;
 var timer=null;
 window.onscroll=function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 if(topH>clientHeight){
 obtn.style.display="block";
 }else{
 obtn.style.display="none";
 }
 }
 obtn.onclick=function(){
 timer=setInterval(function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 var stepLength=Math.ceil(topH/5);
 document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
 if(topH==0){
 clearInterval(timer);
 }
 },30);
 }
}

学习视频地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

    手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

    这篇文章主要介绍了手写的一个兼容各种浏览器的javascript getStyle函数,用来取元素的样式,需要的朋友可以参考下
    2014-06-06
  • js实现九宫格抽奖

    js实现九宫格抽奖

    这篇文章主要为大家详细介绍了js实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS实现页面内跳转的简单代码

    JS实现页面内跳转的简单代码

    这篇文章主要介绍了JS实现页面内跳转的简单代码,需要的朋友可以参考下
    2017-09-09
  • JS实现的左侧竖向滑动菜单效果代码

    JS实现的左侧竖向滑动菜单效果代码

    这篇文章主要介绍了JS实现的左侧竖向滑动菜单效果代码,涉及JavaScript响应鼠标点击事件操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。今天就来看看bootstrapvalidator如何使用，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • ES6扩展运算符用法实例分析

    ES6扩展运算符用法实例分析

    这篇文章主要介绍了ES6扩展运算符用法,结合实例形式分析了ES6扩展运算符的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • JS中利用FileReader实现上传图片前本地预览功能

    JS中利用FileReader实现上传图片前本地预览功能

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍JS中利用FileReader实现上传图片前本地预览功能，需要的朋友参考下
    2018-03-03
  • 微信小程序学习总结（三）条件、模板、文件引用实例分析

    微信小程序学习总结（三）条件、模板、文件引用实例分析

    这篇文章主要介绍了微信小程序条件、模板、文件引用,结合实例形式分析了微信小程序if条件判断、模板调用、wxss文件引用等相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • uniapp封装存储和路由方法详解

    uniapp封装存储和路由方法详解

    在日常 APP 开发过程中,经常要用到数据的存储、获取和删除等操作以及页面导航之间的跳转,为此,封装了一个两个简单的方法来统一调用,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2023-09-09
  • 你可能不知道的typescript实用小技巧

    你可能不知道的typescript实用小技巧

    作为前端程序员,TS已经成为一项必不可少的技能,本文旨在介绍 TS中的一些实用技巧,提高大家对这门语言更深的认知,这篇文章主要给大家介绍了关于typescript实用小技巧的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论