前言

当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现。

目录

  1. 使用的API简介
  2. 初版(第一版)
  3. 优化(第二版)
  4. 继续优化(第三版 引入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介绍(动画)的更多相关文章

  1. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  2. 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

    //滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...

  3. js 页面滚动到指定位置

    当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...

  4. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

  5. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  6. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  7. 每天一点点之 uni-app 框架开发 - 页面滚动到指定位置

    项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置 实现思路如下: uni.createSelectorQuery().select(".comment").bou ...

  8. 微信小程序页面滚动到指定位置

    页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selec ...

  9. js方法的命名不能使用表单元素的名称或ID

    今天在写页面的时候,遇到一个关于js方法的命名问题,先看下代码: 表单元素如下: <select name="isCulture" onchange="isCult ...

随机推荐

  1. 9.自己实现linux中的tree

    运行效果: 代码: #include <stdio.h> #include <unistd.h> #include <string.h> #include < ...

  2. 关于content-type

    content-type 包含了表单类型和边界字符串信息. 关于content-type get请求的headers中没有content-type这个字段 post 的 content-type 有两 ...

  3. 看似简单!解读C#程序员最易犯的7大错误

    编程时犯错是必然的,即使是一个很小的错误也可能会导致昂贵的代价,聪明的人善于从错误中汲取教训,尽量不再重复犯错,在这篇文章中,我将重点介绍C#开发人员最容易犯的7个错误. 格式化字符串 在C#编程中, ...

  4. Web前端必须规避的8个误区

    现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.下面收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站. 通过避免下面这些小错误 ...

  5. (转载)Android项目实战(三十二):圆角对话框Dialog

    Android项目实战(三十二):圆角对话框Dialog   前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话 ...

  6. LeetCode224. Basic Calculator (用栈计算表达式)

    解题思路 用两个栈分别存字符和数字. 顺序读入字符,处理方式分为字符和数字两种. 处理字符分为')'和非')'两种. 处理数字需要读取字符栈栈顶,分为'+'.'-'和非'+'.'-'. 代码 clas ...

  7. 第二章 Python数据类型详解

    基本概念 迭代(iteration):如果给定一个list或tuple,我们可以通过for循环来遍历,这种遍历我们称为迭代(iteration) 可变:value改变,id不变,可变类型是不可hash ...

  8. node——post提交新闻内容

    获取用户post提交的数据分多次提交,因为post提交数据的时候,数据量可能比较大,会要影响服务器中获取用户所以.提交的所有数据,就必须监听request事件.那么,什么时候才表示浏览器把所有数据提交 ...

  9. ZOJ 3911Prime Query [素数处理 + 线段树]

    Time Limit: 5 Seconds Memory Limit: 196608 KBYou are given a simple task. Given a sequence A[i] with ...

  10. HDU 5533 Dancing Stars on Me( 有趣的计算几何 )

    链接:传送门 题意:给出 n 个点,判断能不能构成一个正 n 边形,这 n 个点坐标是整数 思路:这道题关键就在与这 n 个点坐标是正整数!!!可以简单的分析,如果 n != 4,那一定就不能构成正 ...