css自学框架之平滑滚动

news2024/11/25 3:05:33

今天添加的功能是平滑滚动到指定位置,就是单击页面的按钮,平滑滚动页面到对应的元素,可添加偏移值。
示例:单击ID为gundongBTN 元素,页面平滑滚动到其指定的ID为#topdiv对应内容,同时保留 5px 的偏移间距。

myth("#gundongBTN").scrollTo("#topdiv",5);	

一、Javascript关键代码如下:

// 平滑滚动
		scrollTo: function(el, offset) {			
			this.click(function() {
				var objectEL = myth(el);				
				var top=objectEL.dom[0].offsetTop - offset;
				"scrollBehavior" in document.documentElement.style ? globalThis.scrollTo({
					top: top,
					left: 0,
					behavior: "smooth"
				}) : globalThis.scrollTo(0, top);
			});			
		},

说明:这段代码是加到我们以前js框架myth.js中的,想看完整结构请单击下载。这是以前的代码,加到里面即可。

二、HTML代码如下:

 <div class="mythBox mid">
		<br/>
		<div id="topdiv" style="background-color: coral;">头部</div>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<div id="middleDiv" style="background-color: coral;">指定位置</div>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<button class="btn blue small" id="gundongBTN">滚动到头部</button> &nbsp;&nbsp;
		<button class="btn blue small" id="middleBTN">滚动到指定位置</button>
	</div>	
		<script type="text/javascript">					
			myth("#gundongBTN").scrollTo("#topdiv",5);	
			myth("#middleBTN").scrollTo("#middleDiv",5);	
		</script>

在这里插入图片描述

上述代码单击“滚动到头部”按钮,将会平滑滚动到头部的位置;单击“滚动到指定位置”按钮,将会平滑滚动到指定位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1021601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java计算机毕业设计 基于SSM+Vue医药进出口交易系统的设计与实现 Java课程设计 实战项目

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

八、实时时钟

八、实时时钟 简介时钟芯片模块代码可调时钟 简介 引脚定义和应用电路 我们的开发板没有备用电池 寄存器定义 时序定义 在时钟的上升沿&#xff0c;IO口的数据被写入到芯片中&#xff0c;在下降沿&#xff0c;芯片就会将数据输出。如果是写入&#xff0c;那么在整个过程中&…

MySQL查询表结构方法

MySQL查询数据库单个表结构代码 – 查询数据库表信息 SELECT​ COLUMN_NAME 列名,​ DATA_TYPE 字段类型,​ CHARACTER_MAXIMUM_LENGTH 长度,​ IS_NULLABLE 是否为空,​ IF(column_key PRI,Y,) 是否为主键,​ COLUMN_DEFAULT 默认值,​ COLUMN_COMMENT 备注FROM​ INFORMAT…

c++ reference_wrapper源码注释

并给出图片&#xff0c;这样就不用下载了 谢谢

实现安全的服务通信:探索如何使用服务网格来确保服务间的安全通信

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

C++,基础函数、string、引用型变量reference

9月18日 C标准库。 一、C入门基础 1、基础 入口函数与C语言相同 后缀名使用cpp 注释与c语言相同 导入c标准库无需后缀 自定义头文件与c语言相同 using namespace std; std&#xff1a;名称空间&#xff08;全局区&#xff09; cout、endl属性名称空间“std” C输出没有格式…

linux入门到精通-第三章-vi(vim)编辑器

目录 文本编辑器gedit介绍vi(vim)命令模式命令模式编辑模式末行模式 帮助教程保存文件切换到编辑模式光标移动(命令模式下)复制粘贴删除撤销恢复保存退出查找替换可视模式替换模式分屏其他用法配置文件 文本编辑器 gedit介绍 gedit是一个GNOME桌面环境下兼容UTF-8的文本编辑器…

SpringCLoud——Docker的基本介绍

什么是Docker 项目部署问题 大型项目组件较多&#xff0c;运行环境也较为复杂&#xff0c;部署时会碰到一些问题&#xff1a; 依赖关系复杂&#xff0c;容易出现兼容性问题开发、测试、生产环境有差异。 Docker Docker如何解决依赖的兼容问题的&#xff1f; 将应用的LIbs&…

GDPU 数据结构 天码行空2

实验内容 用顺序表实现病历信息的管理与查询功能。具体要求如下: 利用教材中定义顺序表类型存储病人病历信息(病历号,姓名&#xff0c;症状)&#xff1b;要求使用头文件。 设计顺序表定位查找算法&#xff0c;写成一个函数&#xff0c;完成的功能为:在线性表L中查找数据元素x…

CSS 链接:Link

文章目录 CSS 链接链接样式常见的链接样式文本修饰背景颜色案例1&#xff0c;添加不同样式的超链接2&#xff0c;高级 - 创建链接框 CSS 链接 CSS可以用来设置链接的样式&#xff0c;包括未访问的链接&#xff08;a:link&#xff09;、已访问的链接&#xff08;a:visited&…

【Linux 应用】 kworker 进程

1.简介 “kworker” 是 Linux 内核的工作线程&#xff0c;用于异步处理工作队列中的任务。这些任务包括处理硬件中断、文件系统事件、管理系统内存等。你可能会看到多个 kworker 进程&#xff0c;每个进程的名称后面都有一个数字&#xff0c;如 “kworker/0:1”、“kworker/1:…

GIF动画如何生成?简单几步快速生成gif

gif动画图片制作的方法有哪些&#xff1f;gif动图就是由一帧一帧的静态图像合成的动态效果。gif动图能够在日常聊天中缓解尴尬的气氛&#xff0c;表达你的内心想法等等。那么&#xff0c;gif动图如何自制呢&#xff1f;通过使用专业的gif动画制作&#xff08;https://www.gif.c…

Tomcat7+ Weak Password Backend Getshell Vulnerability

漏洞描述 Tomcat 支持通过后端部署 war 文件&#xff0c;所以我们可以直接将 webshell 放入 Web 目录下。为了访问后端&#xff0c;需要权限。 Tomcat7 的权限如下&#xff1a; 经理&#xff08;后台管理&#xff09; 管理器-GUI&#xff08;HTML 页面的权限&#xff09;管理…

JMeter压力测试初体验:线程组、取样器、监听器的简单使用以及如何查看压测结果

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;CSDN实力新星&#xff0c;后端开发两年经验&#xff0c;曾担任甲方技术代表&#xff0c;业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开…

王国纪元 - 龙火战场+国战+IP联动ACW

IGG出品 龙火战场 类似于一个演习战场&#xff0c;给平时不常打仗的小伙伴一个打仗的机会。 大致流程&#xff1a;进场5分钟可以和朋友聊天打屁&#xff0c;商量战术&#xff0c;之后5分钟可以进攻哨塔和传送阵&#xff08;低级联赛没有传送阵&#xff09;&#xff0c;哨塔没什…

如何写出一个成熟的线上线下结合的营销方案?

分享一下咱们案例库里策划的一个线上线下结合的活动的案例。 这个活动是为了推广一个新品牌&#xff0c;增加品牌知名度和用户粘性。 你可以根据以下几个要点来进行活动策划&#xff1a; 1、目标&#xff1a; 让目标用户了解并喜欢新品牌&#xff0c;激发用户参与和分享&am…

使用延迟队列解决分布式事务问题——以订单未支付过期,解锁库存为例

目录 一、前言 二、库存 三、订单 一、前言 上一篇使用springcloud-seata解决分布式事务问题-2PC模式我们说到了使用springcloud-seata解决分布式的缺点——不适用于高并发场景 因此我们使用延迟队列来解决分布式事务问题&#xff0c;即使用柔性事务-可靠消息-最终一致性方…

【JAVASE】图书管理系统

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 图书管理系统 1. 设计思路图2. 创建 boo…

2023年 国赛 数学建模C 基于遗传算法和神经网络的销量定价模型

一、写在开头 阅读者可能需要先阅读2023年国赛C题才能读懂下面的内容。 文章着重于解题方向指引和经历分享&#xff0c;只解释部分核心代码。 二、内容概述 刚刚做完比赛&#xff0c;对这段经历和对问题的处理方法进行下记录。 三、个人经历 今年大三&#xff0c;第一…

stm32f103步进电机S曲线计算

S曲线主要实现低速扭力大&#xff0c;更快更稳 https://zhuanlan.zhihu.com/p/396648926?utm_campaign&utm_mediumsocial&utm_oi1361101006265331712&utm_psn1686906450235133952&utm_sourcezhihu 可点击上面链接查看啤酒杯的运动动画 摘自一段知乎上一段关于…