原生Js回到顶部效果

最新推荐文章于 2023-09-04 21:11:45 发布

原创

最新推荐文章于 2023-09-04 21:11:45 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web前端开发

这篇博客介绍了如何使用原生JavaScript实现简单的回到顶部效果，包括显示与隐藏按钮的控制，以及在不同浏览器下的兼容性处理。文章提到了通过getElementsByClassName获取元素集合，并用数组方法操作，同时讨论了放弃tab键依赖，使用空格代替的处理。还提到了Emmet插件的安装和使用，以及jq库中实现动画效果的便捷性，以及锚点法在特定场景的应用和可能的问题。

前言：

使用原生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 type="text/css">
		.btn:hover{
			background: blue;
		}
		.btn{