快捷導(dǎo)航

JavaScript實(shí)現(xiàn)平滑滾動(dòng)效果

更新時(shí)間：2024年06月02日 14:10:15 作者：網(wǎng)絡(luò)點(diǎn)點(diǎn)滴

頁面平滑滾動(dòng)是網(wǎng)頁一種常見的效果,平滑滾動(dòng)的原理其實(shí)很簡(jiǎn)單,無非就是讓頁面一種肉眼可見的速度從當(dāng)前位置滾動(dòng)到指定位置,那如何用原生的JS實(shí)現(xiàn)這也效果呢？本文給大家介紹了JavaScript實(shí)現(xiàn)平滑滾動(dòng)效果,需要的朋友可以參考下

● 本次我們將實(shí)現(xiàn)點(diǎn)擊按鈕時(shí)候，可以平滑得滾動(dòng)到指定位置

● 首先我們獲取到按鈕信息和想要滾動(dòng)到得章節(jié)

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

● 下一步就是添加點(diǎn)擊事件了

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

getBoundingClientRect()是一個(gè)JavaScript方法，用于獲取一個(gè)元素相對(duì)于視口的位置和尺寸。它返回一個(gè)DOMRect對(duì)象，包含了元素的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());
});

//通過調(diào)用e.target.getBoundingClientRect()，你可以獲取觸發(fā)點(diǎn)擊事件的元素相對(duì)于視口的位置和尺寸信息。

● 我們也可以獲得當(dāng)前滾動(dòng)位置的 X 軸和 Y 軸坐標(biāo)

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
  );

● 現(xiàn)在就簡(jiǎn)單了，我們只需要點(diǎn)擊按鈕的時(shí)候更改一下我們想要的章節(jié)坐標(biāo)即可

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);
});

● 現(xiàn)在確實(shí)可以跳轉(zhuǎn)了，但是細(xì)心的小伙伴會(huì)發(fā)現(xiàn)，這個(gè)必須在頂部才能正常跳轉(zhuǎn)，往下面滑動(dòng)一點(diǎn)就不行了，因?yàn)轫撁婊瑒?dòng)就會(huì)章節(jié)的到頂部的X軸就會(huì)變動(dòng)，我們必須加上滑動(dòng)的距離才可以

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
  );
});

● 現(xiàn)在在任何視口都可以跳轉(zhuǎn)了，但是跳轉(zhuǎn)有點(diǎn)生硬，我們要給他這是平滑滾動(dòng)

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',
  });
});

現(xiàn)在可以實(shí)現(xiàn)平滑滾動(dòng)了，但是上述的操作都是比較老的操作方法了，對(duì)于現(xiàn)代瀏覽器，我們有更加現(xiàn)代的方法去實(shí)現(xiàn)平滑滾動(dòng)；

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' });
});

這樣就可以更加現(xiàn)代化的實(shí)現(xiàn)平滑滾動(dòng)了，但是可能會(huì)存在老的瀏覽器不兼容的問題，但是現(xiàn)代化的實(shí)現(xiàn)方法的邏輯也是按照我們上面的步驟來執(zhí)行的！

以上就是JavaScript實(shí)現(xiàn)平滑滾動(dòng)效果的詳細(xì)內(nèi)容，更多關(guān)于JavaScript平滑滾動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: