Tatal ke Atas Menggunakan JQuery (Masa Persediaan: 2mins)

Cepat buat laman web kembali ke fungsi tatal atas (tetapkan masa: 2 minit)

Panduan ini akan membimbing anda langkah demi langkah bagaimana untuk menubuhkan ciri belakang ke atas di laman web anda. Hanya tatal ke bawah halaman ini untuk melihat demo.

Muat turun plugin ScrollTo dan masukkannya.
Dapatkan imej (anak panah atau serupa).
mengandungi kod HTML berikut.
mengandungi kod jQuery/javascript berikut untuk menangkap menatal tetingkap dan memproses paparan imej.
itu mudah!

html

<code class="language-html"><a id="scroll-to-top" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036397399855.png" class="lazy" alt="Scroll to Top Using jQuery (Setup time: 2mins) ">
</a></code>

jQuery

Kod jQuery ini akan memaparkan imej apabila pengguna menatal ke bawah, menyembunyikan imej semasa menatal, dan mengendalikan peristiwa klik.

<code class="language-javascript">$(document).ready(function() {
    var $scrollTop = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top');

    $(window).scroll(function() {
        // 向上滚动
        if ($(this).scrollTop() > 100) {
            $scrollTop.fadeIn(1000);
        } else {
            $scrollTop.hide();
        }
    });

    $scrollTop.click(function(e) {
        e.preventDefault();
        $.scrollTo(0, 1000); // 使用scrollTo插件
    });
});</code>

NOTA: Jika anda memerlukan penyelesaian serasi dengan penyemak imbas, gunakan kod berikut:

<code class="language-javascript">window.scrollTo(0, 0); // Chrome滚动到顶部错误修复</code>

CSS

Kod CSS mudah ini digunakan untuk mengendalikan paparan imej dan ketelusan penyemak imbas.

<code class="language-css">https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    opacity: 0.5; /* 简化透明度设置 */
    transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top:hover {
    opacity: 1.0; /* 简化透明度设置 */
}</code>

JQuery ScrollTop Soalan Lazim (Soalan Lazim)

Bagaimana menggunakan jQuery ScrollTop untuk menatal ke elemen tertentu pada halaman?

Untuk menggunakan jQuery ScrollTop untuk menatal ke elemen tertentu pada halaman, anda perlu terlebih dahulu memilih elemen menggunakan pemilih jQuery dan kemudian gunakan kaedah ScrollTop. Berikut adalah contoh:

<code class="language-javascript">$('html, body').animate({
    scrollTop: $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top
}, 2000);</code>

Dalam kod ini, "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyelement" adalah id unsur yang anda mahu tatal, dan 2000 adalah tempoh animasi gulungan dalam milbil. Ini akan lancar menatal halaman ke elemen yang ditentukan dalam 2 saat.

Bolehkah saya menggunakan jQuery scrolltop tanpa animasi?

Ya, anda boleh menggunakan jQuery ScrollTop tanpa animasi. Kaedah animasi dalam jQuery tidak diperlukan untuk scrolltop. Inilah caranya:

<code class="language-javascript">$('html, body').scrollTop($("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top);</code>

Ini akan segera menatal halaman ke elemen yang ditentukan.

(Kandungan FAQ berikutnya selaras dengan teks asal, menghilangkan bahagian pendua untuk mengelakkan redundansi.)

Atas ialah kandungan terperinci Tatal ke Atas Menggunakan JQuery (Masa Persediaan: 2mins). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!