脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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平滑滚动的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 基于AGS JS开发自定义贴图图层

    基于AGS JS开发自定义贴图图层

    这篇文章主要为大家详细介绍了基于AGS JS开发自定义贴图图层的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 一文详解JavaScript中如何阻止元素的默认行为

    一文详解JavaScript中如何阻止元素的默认行为

    在网页开发中,许多用户操作会触发浏览器的默认行为,例如,当用户点击一个超链接时,浏览器会导航到链接的目标页面,为了提升用户体验或控制页面行为,我们通常需要阻止这些默认行为,所以本文我们将探讨如何在JavaScript中阻止元素的默认行为,需要的朋友可以参考下
    2025-06-06
  • 纯JS半透明Tip效果代码

    纯JS半透明Tip效果代码

    自己根据网上提供的一个透明功能类库写的纯JS半透明Tip效果
    2008-10-10
  • Chart.js与ECharts.js图表使用过程组件对比

    Chart.js与ECharts.js图表使用过程组件对比

    chartjs只能基于canvas,虽然只有英文文档,但定制化程度更高,社区成熟,功能就更加稳定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社区库,另外ECharts.js还支持3d效果的图表,相当炫酷,国内开发者大多数使用这个,有中文文档
    2023-10-10
  • webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

    webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

    这篇文章主要介绍了webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • javascript 绘制矩形框

    javascript 绘制矩形框

    今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单
    2009-04-04
  • 一组JS创建和操作表格的函数集合

    一组JS创建和操作表格的函数集合

    在用AJAX的时候，经常要用JS操作DOM，当涉及到数据列表的时候，那用表格比较多，这里写了组函数集合，专门用来操作表格，当然，目前还有很多不足，但是对一些简单操作还是很方便的。
    2009-05-05
  • 浅谈目前可以使用ES10的5个新特性

    浅谈目前可以使用ES10的5个新特性

    这篇文章主要介绍了浅谈目前可以使用ES10的5个新特性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • javascript中call apply 的应用场景

    javascript中call apply 的应用场景

    call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.
    2015-04-04
  • javascript设置连续两次点击按钮时间间隔的方法

    javascript设置连续两次点击按钮时间间隔的方法

    这篇文章主要介绍了javascript设置连续两次点击按钮时间间隔的方法,是非常实用的技巧,需要的朋友可以参考下
    2014-10-10

最新评论