原生Js回到顶部效果

最新推荐文章于 2024-03-19 10:15:00 发布
VIP文章 最新推荐文章于 2024-03-19 10:15:00 发布
阅读量3.7k 收藏 1
点赞数 1
分类专栏： Js+Html+css 文章标签： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_coding2015/article/details/52128444
版权

前言：

使用原生js实现简单的回到顶部效果。需求比较明确：1.显示与隐藏按钮。2.中途再次触发onscroll清除定时器（暂时未实现，希望各位赐教）

代码：

<!-- 
Time:2016.8.4
author:Joel

Dom操作
1.document.getElementById    根据ID获取标签元素
2.document.documentElement.scrollTop    .ie滚动条数值
3.document.body.scrollTop  .chrome
4.document.documentElement.clientHeight  可视区域高度

事件运用
1.window.onload  加载完毕触发事件
2.onclick  点击触发事件
3.window.scroll  滚动条触发事件

定时器
1.setInterval()
2.clearInterval() 
-->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style
最低0.47元/天 解锁文章
my_coding2015
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生JS实现平滑回到顶部组件
10-22
返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置,接下来通过本文给大家介绍原生JS实现平滑回到顶部组件，需要的朋友参考...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 697
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js直接回到顶部几种方法
weixin_67002441的博客
03-20 1798
js直接回到顶部几种方法
【JavaScript】---- 纯 js 实现返回页面顶部
最新发布
止于至善
03-19 654
由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！实现了平滑滚动到顶部；在滚动完成后执行回调函数。
js练习总结
aohudai3633的博客
08-16 667
1.div返回顶部 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.c...
js简单的返回顶部
VibMike的博客
06-20 6147
1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div，然后点击div回到顶部，然后判断你的页面处于浏览器顶部，隐藏你的回到顶部按钮，需要去判断你的浏览器是否位于顶部csdn的回到顶部按钮2、我实现的思路比较简单，写一个透明的，高度只有1像素的div放在最顶上，让js判断浏览器窗口的高度是否大于div的高度，大于就显示你的回到顶部，小于就隐藏3、写一个用来回滚到顶部的按钮，设置样式并固定它在你想要固定的高度上（浏览器窗口）4、写一个div撑开浏览器高度（页面原来够高出现滚动条忽略这个）5、js部分，先获取
JS实现回到顶部效果（带动画）
PorkCanteen的博客
11-23 749
用js函数实现触发后页面逐渐滚动回顶部的效果。
原生js实现淘宝首页点击按钮缓慢回到顶部效果
10-26
本例将实现这样的一个效果：下拉到一定距离后按钮才显示出来，鼠标放到按钮上时，按钮背景会变成灰色，并且图标变成了文字。点击按钮缓慢回到顶部
原生js实现返回顶部缓冲效果
10-20
本文主要分享了原生js实现返回顶部缓冲效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
详解原生JS回到顶部
10-17
主要介绍了JS回到顶部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用原生js做个简单的滑动效果的回到顶部
10-25
很多网页在下方都会放置一个“返回顶部”按钮，这样可以帮助访客重新找到导航或者重温一遍广告，于是将返回顶部功能做成了滑动效果
js实现点击按钮返回顶部
m0_74913905的博客
03-28 1077
利用html+css+JavaScript实现当往下滑动超过400像素后，显示按钮，点击可返回顶部，
基于JS实现回到页面顶部的五种写法(从实现到增强)
在下魔王ii的博客
04-27 179
基于JS实现回到页面顶部的五种写法(从实现到增强) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
JS返回顶部的几种方法
mrli113的专栏
03-07 1471
JS返回顶部的几种方法现在总结一下js返回顶部的几种方法，这里先给出具体代码，来明白js是如何实现返回到顶部这一操作的，然后加入CSS样式，使页面有更好的体验 简单方式，锚标记 使用scrollTo函数 JQuery方式 一、锚标记二、scrollTo函数三、JQuery方式
Javascript方法实现点击回到页面顶部
m0_59778008的博客
09-12 786
JavaScript一键回到顶部方法
js动画之返回顶部
The_over的博客
03-28 116
document.documentElement.clientHeight 全部的高度。document.documentElement.clientHeight 可视高度。标准模式下：document.documentElement.scrollTop。document.body.clientHeight 全部的高度。document.body.clientHeight 可视高度。非标准模式：document.body.scrollTop。
使用原生js如何实现回到顶部的功能
weixin_46077222的博客
08-31 106
使用原生js如何实现回到顶部的功能
JS返回顶部功能
zhaoyifei01的博客
02-11 156
JS顶部返回功能
原生js实现卡牌翻牌效果
07-28
原生JS实现卡牌翻牌效果可以通过以下步骤实现： 1. 创建一个Card对象，包含卡片的图像路径、状态（是否翻开）等属性。 2. 创建一个Card数组，用于存储所有的卡片对象。 3. 使用Array.sort()方法对卡片数组进行乱序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值