Rumah hujung hadapan web tutorial js jQuery创建平滑的页面滚动(顶部或底部)_jquery

jQuery创建平滑的页面滚动(顶部或底部)_jquery

May 16, 2016 pm 05:41 PM
licin Menatal halaman atas

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery。让您可以滚动到你的网页的顶部或底部

它是如何工作的
首先,加载jquery库在 head>标签结束前:

复制代码 代码如下:

jQuery滚动到底部:

链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
第一行代码在页面加载之前执行
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在这个函数中,执行这个代码
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。
jQuery的滚动到顶部
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。
链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行:
return false;这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样
复制代码 代码如下:

event.preventDefault();
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan fungsi butang tatal halaman ke atas dalam JavaScript? Bagaimana untuk melaksanakan fungsi butang tatal halaman ke atas dalam JavaScript? Oct 19, 2023 am 11:16 AM

Bagaimana untuk melaksanakan fungsi butang tatal halaman ke atas dalam JavaScript? Dalam reka bentuk web, kadangkala kita memerlukan fungsi yang boleh kembali ke bahagian atas halaman dengan cepat, supaya pengguna tidak perlu menatal halaman secara manual. Fungsi ini biasanya dilaksanakan melalui butang "kembali ke atas". Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan JavaScript untuk mencapai fungsi ini dan memberikan contoh kod terperinci. Pertama, kita perlu menambah elemen butang pada fail HTML untuk mencetuskan fungsi kembali ke atas. Sebagai contoh, anda boleh

Applet WeChat melaksanakan kesan pemantauan tatal halaman Applet WeChat melaksanakan kesan pemantauan tatal halaman Nov 21, 2023 am 08:18 AM

Maaf, saya tidak dapat memberikan contoh kod khusus. Jika anda ingin mengetahui cara melaksanakan kesan pemantauan tatal halaman dalam applet WeChat, anda boleh mencubanya sendiri dengan mengikuti langkah berikut: Cipta projek applet WeChat baharu. Tulis struktur halaman dalam fail wxml, termasuk elemen yang memerlukan pemantauan tatal. Tetapkan gaya halaman dalam fail wxss, termasuk gaya elemen mendengar tatal. Tulis logik pemantauan tatal dalam fail js, dan anda boleh mencapai kesan pemantauan tatal dengan mendengar acara tatal halaman. Pratonton kesan melalui alat pembangun WeChat,

Applet WeChat menyedari kesan menatal halaman ke kedudukan tertentu Applet WeChat menyedari kesan menatal halaman ke kedudukan tertentu Nov 21, 2023 pm 12:58 PM

Applet WeChat melaksanakan kesan menatal halaman ke kedudukan tertentu Contoh kod khusus diperlukan. Dalam program mini, selalunya perlu untuk mencapai kesan menatal ke kedudukan tertentu pada halaman Artikel ini akan memperkenalkan cara melaksanakan fungsi ini dalam program mini dan memberikan contoh kod tertentu. Untuk mencapai kesan menatal halaman ke kedudukan yang ditentukan, terdapat dua aspek utama kerja: satu adalah untuk mendapatkan maklumat kedudukan elemen pada kedudukan yang ditentukan, dan satu lagi adalah untuk

Bagaimana untuk mencapai kesan tatal lancar dengan CSS Bagaimana untuk mencapai kesan tatal lancar dengan CSS Nov 21, 2023 pm 01:13 PM

Cara menggunakan CSS untuk mencapai kesan tatal yang lancar Dalam reka bentuk dan pembangunan web, kesan tatal adalah kesan yang sangat biasa dan hebat yang boleh membawa pengalaman yang lebih baik kepada pengguna. Untuk mencapai kesan tatal yang lancar, anda boleh mencapainya melalui beberapa teknik CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan tatal yang lancar dan memberikan contoh kod khusus. 1. Gunakan mata sauh untuk mencapai tatal halaman dalaman yang lancar Titik sauh ialah tanda dalam HTML Kedudukan tertentu pada halaman boleh ditakrifkan sebagai titik sauh dan diletakkan melalui nilai titik sauh dalam URL. dalam lancar

PHP melaksanakan kemahiran menatal halaman dalam applet WeChat PHP melaksanakan kemahiran menatal halaman dalam applet WeChat Jun 01, 2023 am 09:40 AM

Dalam tahun-tahun kebelakangan ini, program mini WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Memandangkan teknologi terus dikemas kini, semakin ramai pembangun mula menggunakan pelbagai teknik untuk melaksanakan program mini yang lebih baik. Antaranya, teknik menatal halaman adalah salah satunya. Dalam program mini WeChat, teknik menatal halaman boleh mencapai pengalaman pengguna yang lebih lancar dan meningkatkan kualiti keseluruhan program mini. Dalam proses melaksanakan teknik menatal halaman, PHP juga boleh memainkan peranan yang besar. Berikut ialah tentang cara menggunakan PHP untuk melaksanakan penatalan halaman dalam program mini WeChat

Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan tatal halaman dan kedudukan dalam Vue? Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan tatal halaman dan kedudukan dalam Vue? Jul 21, 2023 pm 05:42 PM

Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan tatal halaman dan kedudukan dalam Vue? Dalam aplikasi Vue, penghalaan boleh digunakan untuk mencapai lompatan dan navigasi antara halaman. Sebagai tambahan kepada fungsi lompatan asas, kami juga boleh menggunakan penghalaan untuk mencapai kawalan dan kedudukan tatal halaman, meningkatkan pengalaman pengguna dan kesan navigasi halaman. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan kawalan tatal halaman dan kedudukan dalam Vue, dan menyediakan contoh kod untuk rujukan. Pertama, kita perlu memasang dan memperkenalkan VueRouter ke dalam projek Vue, yang merupakan pengurus penghalaan yang disediakan secara rasmi oleh Vue

Bagaimana untuk mencapai kesan latar belakang tatal lancar pada halaman web melalui CSS tulen Bagaimana untuk mencapai kesan latar belakang tatal lancar pada halaman web melalui CSS tulen Oct 24, 2023 am 09:02 AM

Bagaimana untuk mencapai kesan latar belakang tatal lancar halaman web melalui Latar Belakang CSS tulen ialah bahagian yang sangat penting dalam reka bentuk web, yang boleh meningkatkan kesan visual dan pengalaman pengguna halaman. Latar belakang halaman web tradisional biasanya statik, tetapi dengan menggunakan teknologi CSS tulen, kami boleh mencapai kesan latar belakang tatal yang lancar, dengan itu menambahkan kesan visual yang lebih dinamik dan jelas pada halaman web. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk mencapai kesan latar belakang tatal yang lancar dan memberikan contoh kod khusus. 1. Persediaan sebelum mula mencapai kesan latar belakang tatal yang lancar

Dalam JavaScript, adakah amalan yang baik untuk meletakkan semua pengisytiharan di bahagian atas? Dalam JavaScript, adakah amalan yang baik untuk meletakkan semua pengisytiharan di bahagian atas? Sep 07, 2023 pm 11:01 PM

Ya, adalah amalan yang baik untuk meletakkan semua pengisytiharan JavaScript di bahagian atas. Mari lihat contoh - Contoh <html> <head> <title>JavaScriptStringmatch()Kaedah</title> </head> <body> &am

See all articles