脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript平滑滚动

JavaScript实现平滑滚动效果

 更新时间：2024年06月02日 14:10:15   作者：网络点点滴  
页面平滑滚动是网页一种常见的效果,平滑滚动的原理其实很简单,无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置,那如何用原生的JS实现这也效果呢？本文给大家介绍了JavaScript实现平滑滚动效果,需要的朋友可以参考下

● 本次我们将实现点击按钮时候，可以平滑得滚动到指定位置

● 首先我们获取到按钮信息和想要滚动到得章节

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

● 下一步就是添加点击事件了

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
});

getBoundingClientRect()是一个JavaScript方法，用于获取一个元素相对于视口的位置和尺寸。它返回一个DOMRect对象，包含了元素的top、right、bottom、left、width、height等属性。

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);
});


btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);

  console.log(e.target.getBoundingClientRect());
});

//通过调用e.target.getBoundingClientRect()，你可以获取触发点击事件的元素相对于视口的位置和尺寸信息。

● 我们也可以获得当前滚动位置的 X 轴和 Y 轴坐标

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);

  console.log(e.target.getBoundingClientRect());

  console.log('Current scrll (X/Y)', window.scrollX, window.screenY);
});

● 我们也可以输出输出视口（viewport）的高度和宽度，也就是可见视口的高度

console.log(
    'height/width viewport',
    document.documentElement.clientHeight,
    document.documentElement.clientWidth
  );

● 现在就简单了，我们只需要点击按钮的时候更改一下我们想要的章节坐标即可

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  window.scrollTo(slcoords.left, slcoords.top);
});

● 现在确实可以跳转了，但是细心的小伙伴会发现，这个必须在顶部才能正常跳转，往下面滑动一点就不行了，因为页面滑动就会章节的到顶部的X轴就会变动，我们必须加上滑动的距离才可以

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  window.scrollTo(
    slcoords.left + window.scrollX,
    slcoords.top + window.scrollY
  );
});

● 现在在任何视口都可以跳转了，但是跳转有点生硬，我们要给他这是平滑滚动

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  // window.scrollTo(
  //   slcoords.left + window.scrollX,
  //   slcoords.top + window.scrollY
  // );
  window.scrollTo({
    left: slcoords.left + window.scrollX,
    top: slcoords.top + window.scrollY,
    behavior: 'smooth',
  });
});

现在可以实现平滑滚动了，但是上述的操作都是比较老的操作方法了，对于现代浏览器，我们有更加现代的方法去实现平滑滚动；

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  section1.scrollIntoView({ behavior: 'smooth' });
});

这样就可以更加现代化的实现平滑滚动了，但是可能会存在老的浏览器不兼容的问题，但是现代化的实现方法的逻辑也是按照我们上面的步骤来执行的！

以上就是JavaScript实现平滑滚动效果的详细内容，更多关于JavaScript平滑滚动的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 浅谈js数组splice删除某个元素爬坑

    浅谈js数组splice删除某个元素爬坑

    这篇文章主要介绍了浅谈js数组splice删除某个元素爬坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 玩转JavaScript OOP - 类的实现详解

    玩转JavaScript OOP - 类的实现详解

    下面小编就为大家带来一篇玩转JavaScript OOP - 类的实现详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js实现简单图片拖拽效果

    js实现简单图片拖拽效果

    这篇文章主要为大家详细介绍了js实现简单图片拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

    BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

    这篇文章主要介绍了BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）,需要的朋友可以参考下
    2017-09-09
  • 微信小程序实现多宫格抽奖活动

    微信小程序实现多宫格抽奖活动

    这篇文章主要为大家详细介绍了微信小程序实现多宫格抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    在写 ts 相关代码的过程中，总能看到 interface 和 type 的身影。它们的作用好像都一样的，相同的功能用哪一个都可以实现，也都很好用，所以也很少去真正的理解它们之间到底有啥区别，因此本文将详细讲解二者的区别，需要的可以参考一下
    2022-04-04
  • 第一次接触Bootstrap框架

    第一次接触Bootstrap框架

    这篇文章主要为大家详细介绍了Bootstrap框架,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • javascript中的previousSibling和nextSibling的正确用法

    javascript中的previousSibling和nextSibling的正确用法

    这篇文章主要介绍了javascript中的previousSibling和nextSibling的正确用法的相关资料,需要的朋友可以参考下
    2015-09-09
  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中匿名函数的调用与写法实例详解(多种)

    js中定义函数的方式有很多种，函数直接量就是其中一种，下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法，对js匿名函数调用，js匿名函数写法相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript实现多文件拖动上传功能

    JavaScript实现多文件拖动上传功能

    这篇文章主要为大家详细介绍了如何使用JavaScript实现多文件拖动上传功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04

最新评论