脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript跟随滚动条漂浮的返回顶部按钮效果

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

 更新时间：2016年08月19日 11:36:01   作者：微wx笑  
这篇文章主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果。分享给大家供大家参考，具体如下：

比较优秀的一款超过一屏高度才显示的，跟随滚动条漂浮的返回顶部按钮特效代码。

运行效果如下图所示：

完整实例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body{ height:2000px;}
.rTop{ width:100px; height:25px; text-align:center; font-size:small; line-height:25px; border:1px solid #999; position:fixed; right:0; bottom:0;
border-bottom-color:#333; border-right-color:#333; margin:5px; cursor:pointer; display:none}
</style>
</head>
<body>
<div class="rTop" id="rTop">返回顶部</div>
<script>
 window.onscroll=function(){
 if(document.body.scrollTop||document.documentElement.scrollTop>0){
 document.getElementById('rTop').style.display="block"
 }else{
 document.getElementById('rTop').style.display="none"
 }
 }
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 在js中判断checkboxlist(.net控件客户端id)是否有选中

    在js中判断checkboxlist(.net控件客户端id)是否有选中

    添加或修改内容时，需要对关键数据进行判空处理，checkboxlist是否有选择项如何使用js判断实现，接下来为大家详细介绍下实现方法，感兴趣的朋友可以参考下哈
    2013-04-04
  • 详解照片瀑布流效果（js，jquery分别实现与知识点总结）

    详解照片瀑布流效果（js，jquery分别实现与知识点总结）

    本篇文章主要介绍了照片瀑布流效果，实现图片自动加载的瀑布流效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • uniapp解决token值无法使用的问题

    uniapp解决token值无法使用的问题

    这篇文章主要给大家介绍了如何使用uniapp解决token值无法使用的问题,文中给大家详细介绍了产生原因和解决方案,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-10-10
  • 小程序上传文件至云存储的实现

    小程序上传文件至云存储的实现

    在小程序云开发中，要实现上传文件至云存储，有两种方案：云函数和HTTP API，本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储，感兴趣的可以了解一下
    2022-01-01
  • js实现显示手机号码效果

    js实现显示手机号码效果

    本文主要介绍了js实现显示手机号码效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 详谈JS中实现种子随机数及作用

    详谈JS中实现种子随机数及作用

    这篇文章详细介绍了种子随机数在JS中如何实现以及有什么作用，希望能帮助有需要的人。下面一起来看看。
    2016-07-07
  • 解决layui的form里的元素进行动态生成,验证失效的问题

    解决layui的form里的元素进行动态生成,验证失效的问题

    今天小编就为大家分享一篇解决layui的form里的元素进行动态生成,验证失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 时间处理工具day.js常用方法

    时间处理工具day.js常用方法

    平时项目中笔者也常用dayjs,它确实很好用,Day.js有着几乎和Moment.js一样的API,因此如果你用过Moment.js,那么也可以轻松使用Day.js,这篇文章主要给大家介绍了关于时间处理工具day.js常用方法的相关资料,需要的朋友可以参考下
    2024-02-02
  • Bootstrap菜单按钮及导航实例解析

    Bootstrap菜单按钮及导航实例解析

    这篇文章主要介绍了Bootstrap菜单按钮及导航的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-09-09
  • 使用JavaScript实现实时搜索建议功能

    使用JavaScript实现实时搜索建议功能

    在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
    2024-02-02

最新评论