Saya menemukan kode ini online untuk Tombol Kembali Ke Atas. Ini bekerja dengan sangat baik di situs web.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

// Let's set up a function that shows our scroll-to-top button if we scroll beyond the height of the initial window.
const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;

  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 100) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

window.addEventListener("scroll", scrollFunc);

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;

  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Tetapi setiap kali saya menambahkan pengguliran yang mulus untuk membuat pengalaman pengguna lebih baik:

html {
   scroll-behavior: smooth;
}

Tombol back-to-top mengalami gangguan.

Idealnya, saya ingin tombol kembali-ke-atas untuk menggulir dengan mulus serta konten lainnya di halaman (mis. tautan jangkar di navigasi yang menautkan ke bagian di halaman yang sama).

4
Lisa 24 Oktober 2019, 22:15

1 menjawab

Jawaban Terbaik

Jika Anda ingin mulus kembali ke atas, ini akan membantu.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');
smoothScrollCapture = (x) => {
  event.preventDefault();
  var id = event.target.getAttribute('href').split("#")[1]
  var el = document.getElementById(id);
  var x = el.getBoundingClientRect().left
  var y = el.getBoundingClientRect().top
  smoothScrollFunc(x, y)
}

smoothScrollFunc = (x, y) => {
  event.preventDefault()
  window.scrollTo({
    top: y,
    left: x,
    behavior: 'smooth'
  });
}

window.addEventListener('DOMContentLoaded', () => {
  scrollToTopButton.addEventListener('click', () => {
    smoothScrollFunc(0, 0)
  })

  var aTags = document.getElementsByTagName('A')
  var myTags = []
  for (var i = 0; i < aTags.length; i++) {
    if (aTags[i].getAttribute("href").indexOf('#') === 0) {
      aTags[i].addEventListener('click', smoothScrollCapture);
    }
  }
})

window.addEventListener('scroll', () => {
  // Get the current scroll value
  let y = window.scrollY;
  if (y > 100) {
    scrollToTopButton.style.display = 'block'
  } else {
    scrollToTopButton.style.display = 'none'
  }
})
#js-top {
  position: fixed;
  /*OR WHATEVER YOU PREFER*/
  bottom: 10px;
  /*OR WHEREVER YOU PREFER*/
  left: 50%;
  /*OR WHEREVER YOU PREFER*/
  display: none;
}
<div style="height: 1000px;">
  <div class="nav-items">
    <a href="#paragraph1">Paragraph One</a>
    <a href="#paragraph2">Paragraph Two</a>
    <a href="#paragraph3">Paragraph Three</a>
    <a href="#paragraph4">Paragraph Four</a>
  </div>

  <div style="height: 100px;"></div>
  <p id="paragraph1">Here is the first paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph2">Here is the second paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph3">Here is the third paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph4">Here is the fourth paragraph!</p>
</div>

<button id='js-top'>Scroll To Top</button>

EDIT Saya telah memperbarui cuplikan kode. Mungkin ada solusi hanya dengan menggunakan CSS tetapi saya tidak dapat menemukannya. Menggunakan JavaScript, pada dasarnya saya menangkap semua tag a dengan href yang merupakan id dari elemen lain dan menerapkan fungsi smoothScrollCapture ke dalamnya.

Saya pikir ini akan lebih mudah bagi Anda daripada masuk ke HTML Anda dan memberikan semua item navigasi halaman kelas unik baru.

Di smoothScrollCapture, saat Anda mengeklik item navigasi (misalnya, paragraph3), Anda menangkap id dari peristiwa klik (href target, lalu menggunakan getBoundingClientRect() untuk mendapatkan nilai top dan left. Karena Anda melakukan ini dalam fungsi klik, itu harus responsif terhadap pengubahan ukuran halaman. Kemudian Anda meneruskan nilai tersebut ke smoothScrollFunc yang hanya menerapkan nilai x dan y tersebut ke fungsi window.scrollTo.

Saya juga telah membungkus semua kode inisialisasi dalam pendengar acara DOMContentLoaded untuk ukuran yang baik. Langkah-langkah inisialisasi ini termasuk mendapatkan tag a dan menerapkan smoothScrollCapture padanya, serta menambahkan peristiwa klik ke scrollToTopButton dan meneruskan 0 untuk x dan y nilai karena itu hanya akan ke bagian atas halaman.

1
Matt Croak 25 Oktober 2019, 14:48