使用JS方法使页面滚动到指定元素+优化+API介绍(动画)
前言
当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现。
目录
- 使用的API简介
- 初版(第一版)
- 优化(第二版)
- 继续优化(第三版 引入tween.js库)
正文
1 使用的API简介
document.querySelectorAll
preventDefault
currentTarget
getAttribute
document.querySelector
- offsetTop
- window.scrollTo
window.scrollY
setInterval
window.clearInterval
2 初版(第一版)
- 代码及思路如下:
//1 获取所有的a标签
let aTags=document.querySelectorAll("nav.menu ul li a")
//console.log(aTags)
//2 遍历a标签并点击标签滚动到指定元素位置
for(let i=;i<=aTags.length;i++){
aTags[i].onclick=function(x){
x.preventDefault(); //阻止a标签默认的跳转
//console.log(x.currentTarget);
let a=x.currentTarget;
let href=a.getAttribute("href"); //找到href中的内容,如果href中时一个锚点则返回#siteSkill
//console.log(href);
let element=document.querySelector(href); //找到内容中的锚点对应ID的标签,如对应的锚点名为#siteSkill,则返回<section class="skills" id="siteWorks">…</section>
//console.log(element);
let top=element.offsetTop; //获取元素到页面最顶点的高度(不会随着页面滚动变化的高度)
//console.log(top);
window.scrollTo(,top-);
}
} - 效果图如下
- 这样能准确的达到想要的地方并且也不会内容也不会被挡住,但是,也存在一些缺点,比如跳转太生硬,中间没有过渡,影响用户体验。
3 优化(第二版)
- 优化后代码如下:
//1 获取所有的a标签
let aTags=document.querySelectorAll("nav.menu ul li a")
//console.log(aTags)
//2 遍历a标签并点击标签跳到指定元素位置
for(let i=;i<=aTags.length;i++){
aTags[i].onclick=function(x){
x.preventDefault(); //阻止a标签默认的跳
let a=x.currentTarget;
let href=a.getAttribute("href"); //找到href中的内容,如果href中时一个锚点则返回#siteSkill
let element=document.querySelector(href); //找到内容中的锚点对应ID的标签,如对应的锚点名为#siteSkill,则返回<section class="skills" id="siteWorks">…</section>
let top=element.offsetTop;
let n=; //动的次数
let t=/n; //多久动一次
let currentTop=window.scrollY; //所在的位置
let targetTop=top-; //目标位置
var s=(targetTop-currentTop)/n; //每次动的距离
let i=;
let id=setInterval(()=>{
if(i===n){
window.clearInterval(id);
return;
} //当i=n时停止动画
i=i+
window.scrollTo(,currentTop+s*i) },t)
}
} - 优化后有跳转动画,但是依然还有缺点,比如:定义的是时间一致,所以跳转到距离TOP不同位置的地方速度不一致。看起来依然生硬不自然
4 继续优化(第三版 引入tween.js库)
- 再次优化后的代码
//1 引入tween.js库
<script src='https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js'></script>
<script> //2 获取所有的a标签 let aTags=document.querySelectorAll("nav.menu ul li a");function animate(time){
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate); //3 遍历a标签并在点击标签时滚动到指定元素的位置
for(let i=;i<=aTags.length;i++){
aTags[i].onclick=function(x){
x.preventDefault(); //阻止a标签默认的跳
let a=x.currentTarget;
let href=a.getAttribute("href"); //找到href中的内容,如果href中时一个锚点则返回#siteSkill
let element=document.querySelector(href); //找到内容中的锚点对应ID的标签,如对应的锚点名为#siteSkill,则返回<section class="skills" id="siteWorks">…</section>
let top=element.offsetTop;
let currentTop=window.scrollY; //所在的位置
let targetTop=top-; //目标位
let s=targetTop-currentTop; //所在到目标的高度差
let t=Math.abs((s/)*) //Math.abs方法保证时间为正值不为负数。ps:Math的首字母需要大写!!!
var coords={y:currentTop}; //y为所在位置
if(t>=){t=} //如果时间最大为500,不超过500
var tween=new TWEEN.Tween(coords)
.to({y:targetTop},t) //y为到达目标位置,时间
.easing(TWEEN.Easing.Quadratic.In)
.onUpdate(function(){
window.scroll(,coords.y)
})
.start();
}
} </script>
使用JS方法使页面滚动到指定元素+优化+API介绍(动画)的更多相关文章
- jquery页面滚动到指定id
//jquery页面滚动到指定id $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...
- 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载
//滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...
- js 页面滚动到指定位置
当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- 每天一点点之 uni-app 框架开发 - 页面滚动到指定位置
项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置 实现思路如下: uni.createSelectorQuery().select(".comment").bou ...
- 微信小程序页面滚动到指定位置
页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selec ...
- js方法的命名不能使用表单元素的名称或ID
今天在写页面的时候,遇到一个关于js方法的命名问题,先看下代码: 表单元素如下: <select name="isCulture" onchange="isCult ...
随机推荐
- Redis学习笔记(六) 基本命令:List操作
原文链接:http://doc.redisfans.com/list/index.html lpush key value[value...] 将一个或多个value插入到列表的表头:例:lpush ...
- HD-ACM算法专攻系列(16)——考试排名
问题描述: 源码: 主要要注意输出格式. #include"iostream" #include"iomanip" #include"algorith ...
- 什么是 Dropout
为了应对神经网络很容易过拟合的问题,2014年 Hinton 提出了一个神器, **Dropout: A Simple Way to Prevent Neural Networks from Over ...
- C# Distanct List集合
简单一维集合的使用 List<int> ages = new List<int> { 21, 46, 46, 55, 17, 21, 55, 55 }; List<str ...
- The Vertica Analytic Database:C-Store 7 Years Later笔记
1.设计目标 Vertica数据库可以说是7年之后的C-Store,在2012年发表的这样一篇论文,描述了现在基于C-Store的一部分改进,当然,Vertica借鉴了很多C-Store的思想,但并非 ...
- DB2数据库load出现SQL3508N问题
SQL3508N装入或装入查询期间,当存取类型为 "<文件类型>"的文件或路径时出错.原因码:"<原因码>".路径:"< ...
- firefox工具
1.XPath 查看元素的xpath https://addons.mozilla.org/zh-CN/firefox/addon/xpath-checker/ 2. Tamper Data 查看页面 ...
- 页面加载通过javascript来修改控件属性
function changeFormElementStatus(tagNames) { var tagNameArr = tagNames.split("," ...
- 使用 Object.create实现js 继承
二.Object.create实现继承 本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里.下面来通过几个实例来学习该方法的使用: var Pare ...
- MongoDB_安装
windows安装MongoDB 官网下载地址:https://www.mongodb.com/download-center?jmp=nav#community (1)如图点击DOWNLOAD进行下 ...