【JavaScript编程实操14】DOM实操_回到顶部

news/2024/5/19 19:02:24/ 标签: javascript, 前端, 开发语言, visual studio, vscode

前言

        本次主要是针对Javascript阶段的DOM实操方面的练习,本次主要实现当页面内容过多时,可以点击按钮,快速回到页面顶部的效果。这次的实现逻辑比较简单,主要是应用函数实现页面的回到顶部功能,this.scrollTo(0, 0)可以实现页面的滚动到顶部功能,通过获取按钮的id,然后绑定一个onclick事件,当点击按钮时,执行这个函数,实现页面的滚动到顶部功能。

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM实操_回到顶部</title><style>div {/* 内容的宽度和高度会充满整个父元素的宽度和高度  */width: 100%;/* 撑开内容的高度 */height: 500px;background-color: #f2f2f2;margin-bottom: 20px;}/* 按钮的样式 */#btn {/* 按钮的宽度和高度会充满整个父元素的宽度和高度  */display: block;width: 100px;height: 50px;/* 按钮的文字垂直居中 */line-height: 50px;/* 按钮的文字水平居中 */text-align: center;background-color: #4CAF50;color: white;border: none;/* 按钮的边框会变成圆角 */border-radius: 5px;position: fixed;bottom: 20px;right: 20px;/* 鼠标悬停在按钮上时,鼠标的形状会变成一个手型 */cursor: pointer;}</style>
</head>
<body><!-- 回到顶部按钮的实现 --><!-- 回到顶部按钮的作用,是为了方便用户快速回到顶部,是指当页面内容过多时,可以点击按钮,快速回到页面顶部。 --> <div>内容1</div><div>内容2</div><div>内容3</div><div>内容4</div><div>内容5</div><div>内容6</div><div>内容7</div><!-- 按钮的实现 --><a href="javascript:void(0)" id="btn">回到顶部</a><script>// 回到顶部的函数var btn = document.getElementById("btn");// 点击按钮,页面滚动到顶部btn.onclick = function() {// 页面滚动到顶部window.scrollTo(0, 0);}</script>
</body>
</html>

实现效果:

总结

        如果大家觉得有所帮助,记得点赞收藏和关注哦!


http://www.ppmy.cn/news/1434589.html

相关文章

完美解决多种情况下的 java.lang.NullPointerException 的异常

文章目录 1. 复现错误2. 分析问题3. 解决问题1. 复现错误 在工作中,经常会遇见java.lang.NullPointerException的异常,这种异常千奇百怪,但明确一点的是:它是空指针异常,也称之为NPE异常,如下代码所示: @Setter @Getter @Accessors(chain = true) public class Student…

10.Java集合汇总

文章目录 1. Java集合概述1.1 Java集合框架概述1.2 Collection接口继承树1.3 Map接口继承树 2. Collection接口2.1 Collection接口方法 3 Iterator迭代器接口3.1 Iterator接口的方法3.2 foreach循环 4 List接口4.1 List接口方法4.1 ArrayList4.2 LinkedList4.3 Vector4.4 面试题…

【vim】折叠代码

目录 简介操作创建折叠删除折叠打开或关闭折叠在折叠间移动简介 Vim编辑器中可以使用 foldmethod 选项设置折叠方法。 将 foldmethod 设置为 manual 以外的值时,将删除所有折叠并创建新折叠。切换到 manual 方法不会删除现有的折叠。由此可以先用自动定义折叠,然后手动更改它…

redmibook 14 2020 安装 ubuntu

1. 参考博客 # Ubuntu20.10系统安装 -- 小米redmibook pro14 https://zhuanlan.zhihu.com/p/616543561# ubuntu18.04 wifi 问题 https://blog.csdn.net/u012748494/article/details/105421656/# 笔记本电脑安装了Ubuntu系统设置关盖/合盖不挂起/不睡眠 https://blog.csdn.net/…

[蓝桥杯 2018 省 A] 航班时间

题目链接&#xff1a;航班时间 显然&#xff1a;去程时间飞行时间时差&#xff0c;回程时间飞行时间-时差 列方程组可知&#xff1a;飞行时间&#xff08;去程时间回程时间&#xff09;/2 本道题目还有一个难点在于如何读入和输出&#xff1a;可以采用scanf&#xff08;&…

el-select下拉框远程搜索且多选时,编辑需要回显的一个简单案例

前端业务开发中不管使用vue2~3&#xff0c;还是react&#xff0c;angular各种前端技术栈&#xff0c;经常会遇到这种业务。一个下拉框Select中&#xff0c;不仅需要需要支持远程模糊搜索&#xff0c;还需要支持多选。并且在编辑时&#xff0c;还能正常把已经多选好的内容回显到…

有哪些网络连接方式?

网络连接方式多种多样&#xff0c;大家常常对各类连接方式感到困惑&#xff0c;难以区分。以下是从连接形式和用途的角度分类的几种主要网络连接方式&#xff1a; 按连接形式分类 1、有线连接&#xff1a; 以太网连接&#xff1a;使用双绞线或同轴电缆&#xff0c;常见于局域…

「JavaEE」线程状态

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 线程状态 &#x1f349;start 和 run 的区别&#x1f349;终止线程&#x1f349;join & 阻塞状态&#x1f349;线程六大状态 &…

开源AI Agent框架的选择

在选择开源AI Agent框架时,首先需要考虑的是框架的开发优先级、功能特性以及社区支持情况。SuperAGI是一个开发者优先的开源自主AI代理框架,它使开发人员能够快速可靠地构建、管理和运行有用的代理12。这表明SuperAGI可能是一个适合需要快速迭代和高度自定义能力的项目的良好…

Springboot+Vue项目-基于Java+MySQL的图书馆管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

低视力者出行升级:适配服务助力双手解放与环境感知

作为一名资深记者&#xff0c;我有幸深入了解并记录低视力者在日常出行中所面临的挑战与解决方案。近年来&#xff0c;低视力者辅助设备适配服务提供领域的创新成果&#xff0c;尤其是结合手机应用的辅助设备&#xff0c;正在以人性化、智能化的方式&#xff0c;帮助低视力者实…

在PostgreSQL中,如何创建一个触发器并在特定事件发生时执行自定义操作?

文章目录 解决方案示例代码1. 创建自定义函数2. 创建触发器 解释 在PostgreSQL中&#xff0c;触发器&#xff08;trigger&#xff09;是一种数据库对象&#xff0c;它能在特定的事件&#xff08;如INSERT、UPDATE或DELETE&#xff09;发生时自动执行一系列的操作。这些操作可以…

软考高级架构师:AI 通俗讲解软件维护的类型:正确性维护、适应性维护、完善性维护、预防性维护

软件维护是指在软件交付使用后进行的一系列活动&#xff0c;其目的是修复错误、提升性能或更新软件以适应变化的需求。通常&#xff0c;软件维护可以分为四种类型&#xff1a;正确性维护、适应性维护、完善性维护和预防性维护。下面我将用简单的例子和通俗的语言来解释这四种类…

linux复习提纲

后台运行 &&#xff1a;命令行尾输入&#xff0c;命令执行后台运行fg % 作业号&#xff1a;作业前台执行bg % 作业号&#xff1a;作业后台执行 用户权限 主user&#xff08;u&#xff09;-同一组的&#xff08;g&#xff09;-其他&#xff08;o&#xff09; rwx&#xf…

算法 第44天 动态规划6

518 零钱对换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 …

【PHP快速上手(十四)】

目录 PHP快速上手&#xff08;十四&#xff09;PHP 中常用数据库操作使用 WHERE 子句进行条件查询使用 ORDER BY 子句进行排序使用 UPDATE 语句更新数据使用 DELETE 语句删除数据执行事务总结 PHP快速上手&#xff08;十四&#xff09; PHP 中常用数据库操作 当使用 PHP 中的…

2024/4/19学习笔记 vector模拟实现(2)

本次学习重点 1.迭代器区间构造和size_t n 构造 2.string扩容问题 3.erase的缺陷 1.迭代器区间构造和size_t n 构造 vector支持用一段迭代器区间构造&#xff0c;也可以支持任意类型的迭代器区间&#xff0c;所以要写成函数模板 template <class InputIterator> ve…

VUE-配置-流程

VUE-配置-流程 ---1---.安装 NVM: ---2---.用NVM:安装node.js &#xff1a; 修改源&#xff1a; nvm root 命令&#xff0c;可以查看nvm的安装根路径在那个文件夹 root地址&#xff0c;找到setting.txt文件并打开 复制粘贴以下代码&#xff0c; 保存完成nvm源修改&#xff…

MATLAB初学者入门(8)—— 动态规划

动态规划是一种数学方法&#xff0c;用于解决具有递归结构的决策问题&#xff0c;特别是那些涉及顺序决策的问题。在MATLAB中实现动态规划&#xff0c;可以通过定义状态变量、决策变量、状态转移方程以及目标函数来完成。以下是具体的案例分析。 案例分析&#xff1a;项目资源…

Oracle使用内部包自定义创建表空间和用户

如果之前有类似的表空间,可以使用dbms自动生成对应的表空间和数据文件 select dbms_metadata.get_ddl(TABLESPACE,ts.tablespace_name) from dba_tablespaces ts; 可以使用类似的 SQL> set echo off SQL> spool /data/logs/create_tablespace.log SQL> select dbms…