css自学框架之平滑滚动

今天添加的功能是平滑滚动到指定位置,就是单击页面的按钮,平滑滚动页面到对应的元素,可添加偏移值。
示例:单击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.hqwc.cn/news/112320.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站降权的康复办法(详解百度SEO数据分析)

随着搜索引擎算法的不断升级&#xff0c;很多网站在SEO优化过程中遭遇到降权的情况。如果您的网站也遭遇到了类似的问题&#xff0c;不必惊慌失措。本文将为您详细介绍网站降权恢复的方法&#xff0c;包括百度SEO数据分析、网站收录少的5个原因、网站被降权的6个因素以及百度SE…

做了五年功能测试麻木了,现在想进阶自动化测试该从哪里开始?

什么是自动化测试&#xff1f; 做测试好几年了&#xff0c;真正学习和实践自动化测试一年&#xff0c;自我感觉这一个年中收获许多。一直想动笔写一篇文章分享自动化测试实践中的一些经验。终于决定花点时间来做这件事儿。 首先理清自动化测试的概念&#xff0c;广义上来讲&…

激光焊接汽车PP塑料配件透光率测试仪

随着汽车主机厂对车辆轻量化的需求越来越强烈&#xff0c;汽车零部件轻量化设计、制造也成为汽车零部件生产厂商的重要技术指标。零部件企业要实现产品的轻量化&#xff0c;在材料指定的情况下&#xff0c;要通过产品设计优化、产品壁厚减小和装配方式的优化来解决。使用PP材料…

Excel 拆分单元格数据(公式拆分、智能填充、分列)

将姓名工号拆分成 姓名 和 工号 方法1 在 B2 单元格输入 LEFT($A2, FIND(":", $A2) - 1)在 C2 单元格输入 RIGHT($A2, LEN($A2) - FIND(":", $A2))然后 ctrl d 向下填充即可 方法2 在 B2 单元格输入 李金秀&#xff0c;然后选中 B3 单元格&#xff0c…

【计算机网络】——数据链路层(应用:局域网、广域网、设备 )

//仅做个人复习和技术交流&#xff0c;图片取自王道考研&#xff0c;侵删 一、大纲 1、介质访问控制 信道划分介质访问控制 随机访问介质访问控制 2、局域网 3、广域网 4、数据链路层设备 二、局域网 1、局域网基本概念和体系结构 局域网(LocalArea Network): 简称LAN&…

动态内存管理(malloc、free、calloc、realloc函数简介)

动态内存管理 &#x1f383;为什么存在动态内存管理&#x1f383;动态内存函数的介绍&#x1f38a;malloc&#x1f38b;perror函数 &#x1f38a;free&#x1f38a;calloc&#x1f38a;realloc &#x1f383;为什么存在动态内存管理 在此之前&#xff0c;我们开辟内存空间有两种…

buuctf web [极客大挑战 2019]Secret File

纯网页&#xff0c;看一下源码。 这一块源码中有个隐藏的超链接&#xff0c;点击后跳转到了新页面。 新页面的源码里&#xff0c;也有一处可以跳转的超链接。 点进新页面啥也没有了。 单看网页&#xff0c;什么也没有&#xff0c;尝试用burp抓包试试。 在/Archive_room.php跳…

uniapp h5 echarts 打包后图表点击失效/及其他失效

文章目录 期望效果实际效果环境引入echarts方式解决方法&#xff1a;注意 原因多说一句在h5打包的时候将 history 改为 hash 不然在浏览器打开后刷新会404 期望效果 实际效果 环境 pc端 window11 hbuilderx版本 3.8.12 echarts版本 5.4.3 引入echarts方式 npm install echar…

如何在微软Edge浏览器上一键观看高清视频?

编者按&#xff1a;视频是当下最流行的媒体形式之一。但由于视频压缩、网络不稳定等原因&#xff0c;我们常常可以看到互联网上的很多视频其画面质量并不理想&#xff0c;尤其是在浏览器端&#xff0c;这极大地影响了观看体验。不过&#xff0c;近期微软 Edge 浏览器推出了一项…

【PyTorch攻略(2/7)】 加载数据集

一、说明 PyTorch提供了两个数据原语&#xff1a;torch.utils.data.DataLoader和torch.utils.data.Dataset&#xff0c;允许您使用预加载的数据集以及您自己的数据。数据集存储样本及其相应的标签&#xff0c;DataLoader 围绕数据集包装一个可迭代对象&#xff0c;以便轻松访问…

Centos7.9 一键脚本部署 LibreNMS 网络监控系统

前言&#xff1a; LibreNMS 是个以 PHP/MySQL 为基底的自动探索网络监控系统 LibreNMS 官网 版本23.8.2-52-g7bbe0a2 - Thu Sep 14 2023 22:33:23 GMT0700数据库纲要2023_09_01_084057_application_new_defaults (259)Web 服务器nginx/1.20.1PHP8.1.23Python3.6.8DatabaseMa…

etcd之读性能主要影响因素

1、Raft模块-线性读ReadIndex-节点之间的RTT延时、磁盘IO 线性读时Follower节点首先会向Raft 模块发送ReadIndex请求&#xff0c;此时Raft模块会先向各节点发送心跳确认&#xff0c;一半以上节点确认 Leader 身份后由leader节点将已提交日志索引 (committed index) 封装成 Rea…