Tombol HTML ke bagian atas halaman. Buat tombol “Kembali ke Atas” atau Gulir ke Atas menggunakan jQuery. Tombol "Kembali ke Atas" sederhana tanpa JavaScript

Reg.ru: domain dan hosting

Pendaftar dan penyedia hosting terbesar di Rusia.

Lebih dari 2 juta nama domain dalam layanan.

Promosi, email domain, solusi bisnis.

Lebih dari 700 ribu pelanggan di seluruh dunia telah menentukan pilihannya.

Kerangka kerja bootstrap: tata letak adaptif cepat

Kursus video langkah demi langkah tentang dasar-dasar tata letak adaptif dalam kerangka Bootstrap.

Pelajari cara mengetik secara sederhana, cepat dan efisien menggunakan alat yang ampuh dan praktis.

Tata letak untuk memesan dan mendapatkan bayaran.

*Arahkan mouse untuk menjeda pengguliran.

Mundur ke Depan

Gulir halaman halus ke atas dengan jQuery

Dalam video ini kita akan melihat momen seperti membuat halaman gulir ke atas dengan mulus saat mengklik link.

Seringkali lebih mudah menggunakan link "Kembali ke Atas" ketika Anda sudah lebih dekat ke bagian bawah halaman.

Peluang ini hanya bisa diwujudkan menggunakan HTML dan CSS, namun dalam video ini saya akan menunjukkan kepada Anda bagaimana Anda dapat meningkatkan fungsi ini dan membuatnya lebih nyaman menggunakan perpustakaan jQuery.

JavaScript akan memungkinkan kita memastikan pergerakan mulus dari bawah halaman ke atas, menghindari "dendeng" yang terjadi saat menggunakan "jangkar" biasa.

Mereka hanya muncul ketika Anda menggulir halaman ke bawah dengan jumlah piksel tertentu, yang dapat Anda atur sendiri.

Ini juga sangat nyaman karena menarik perhatian seseorang ke elemen interaktif di halaman dan dia menyadari bahwa ada peluang untuk menggunakan fungsi tersebut.

Demonstrasi naskah dan analisis rinci Lihat video di bawah untuk kodenya.

Ikhtisar singkat pelajaran (lihat video untuk semua detailnya):

indeks.html

1. Hal pertama yang kita perlukan adalah file di mana link “Kembali ke Atas” akan ditempatkan. Biarkan saja indeks.html.

Agar semuanya berfungsi, di bagian tersebut kepala dokumen, kita perlu menyertakan file gaya dan dua file JavaScript (lebih lanjut tentangnya nanti):

Pertama kita sertakan perpustakaan jQuery, lalu file script.js dengan kode yang kita tulis sendiri.

Juga di file ini kita perlu menempatkan tautan itu sendiri, ketika diklik akan mengarah ke bagian atas halaman dengan mulus:

Atas

skrip.js

2. Yang kedua adalah file script.js, di mana kita menulis fungsi yang melakukan tindakan dasar:

$(dokumen).siap(fungsi())( $(fungsi ()( $("#back-top").hide(); $(jendela).scroll(fungsi ()( if ($(ini). scrollTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )).klik(fungsi ()( $("tubuh,html").animate(( scrollTop:0 ), 800); kembali salah;

Jadi, pertama-tama kita tunggu hingga dokumen terisi penuh dan sembunyikan tombol "Kembali ke Atas" agar awalnya tidak terlihat di halaman.

Selanjutnya kita capture event window scroll dan jika scroll turun 700 piksel atau lebih, maka kita lancar menampilkan tombol “Kembali ke Atas” menggunakan metode memudar. Jika tidak, kami menyembunyikannya menggunakan metode ini memudar.

Dalam fungsi anonim kedua kami melacak peristiwa klik pada tautan di dalam blok #belakang-atas dan menerapkan metode tersebut menghidupkan untuk naik ke bagian atas halaman dengan lancar (scrollTop:0) dalam 800 ms.

gaya.css

3. Dan ketiga, ini adalah file style. Dalam contoh kita, tidak ada yang berlebihan di dalamnya, jadi hanya ada beberapa gaya:

Isi ( ukuran font: 13px; tinggi garis: 1,65em; font-family: Verdana, sans-serif; ) p ( margin-kiri: 150px; ) /* Tombol kembali ke atas */ #back-top( posisi: diperbaiki; bawah:10px; kiri: 0px; ) #back-top a( lebar:55px; tampilan:blok; perataan teks:tengah; font:11px/100% Arial, Helvetica, sans-serif; transformasi teks: huruf besar ; teks -dekorasi:tidak ada; warna latar: transparan; -moz-transisi:1s; ) /* panah grafis */ #rentang belakang-atas( lebar:55px; tinggi:1600px; tampilan:blok; margin-bawah:7px ; latar belakang: url("../img/up-arrow.png") tanpa pengulangan di tengah bawah; -moz-transition:1s; ) #back-top a:hover span(warna latar: rgba(0, 0, 0, 0,3);)

Yang perlu disebutkan adalah maknanya tetap untuk properti posisi di blok #belakang-atas. Hal ini memungkinkan kita untuk memperbaiki posisi tombol relatif terhadap jendela browser.

Terima kasih telah mengunjungi blog saya. Nama saya Bogdan, saya tinggal di Almaty (Kazakhstan). Dahulu kala, di kelas 7 sekolah, minat saya terhadap pemrograman secara umum dimulai (berkat pelajaran Delphi dalam ilmu komputer). Dan di kelas 9, seorang administrator sistem datang ke sekolah kami, yang ternyata adalah seorang spesialis SEO yang rajin dan umumnya pria yang keren, dan dia memberi tahu saya tentang WordPress, dan bagaimana Anda dapat menghasilkan uang dengan menjalankan blog Anda secara online dan mempromosikannya. . Dari sinilah perkenalan saya dengan WP dan topik menghasilkan uang secara online dimulai.

Saya tidak menghasilkan uang di blog ini, blog ini hanya dibuat sebagai gudang tips berguna yang saya temukan dalam proses kerja. Saya menghasilkan uang dari pengembangan web freelance, yang mana saya telah membuat kemajuan yang baik dalam beberapa tahun terakhir. Mencobanya teknologi yang berbeda, tapi yang terpenting saya suka menulis back-end (logika internal) aplikasi dalam PHP dan JS. Dan tentu saja, saya menulis plugin khusus yang mahal dan rumit untuk WP favorit saya.

Saya juga menyukai air, bersepeda, ski, dan estetika visual dalam segala hal.

Inikah yang biasa mereka tulis di bagian “Tentang Penulis”?

Semoga harimu menyenangkan!

Tombol atas untuk situs - lebih dari 7 solusi terbukti - 4,6 dari 5 berdasarkan 72 suara

Tombol "Kembali ke Atas" memainkan peran besar dalam meningkatkan pengalaman pengguna, terutama pada halaman yang penuh dengan konten. Dan karena konten saat ini merupakan hal yang paling penting bagi sebuah situs, biasanya konten tersebut menjadi semakin banyak di halaman dan menjadi hal yang paling penting cara terbaik Ada berbagai tombol khusus untuk mengarahkan pengunjung ke bagian atas halaman, kita akan melihat cara membuat tombol ke atas untuk situs Anda di artikel ini.

Untuk apa tombol ini dan dalam kasus apa sebaiknya menggunakannya?

Ketika halaman situs berisi konten dalam jumlah besar, pengguna telah membacanya dan menggulir halaman ke bawah titik tertentu atau ke paling bawah, sering kali mulai menggulir ke atas untuk melihat link navigasi yang terletak di bagian atas halaman dan/atau melakukan beberapa tindakan.

Untuk menambah kenyamanan bagi pengguna dan secara umum meningkatkan kegunaan situs Anda, yang terbaik adalah menggunakan tombol atas untuk situs tersebut, dengan mengklik di mana pengguna secara otomatis diarahkan ke bagian atas halaman.

1. Tombol "Kembali ke Atas" sederhana tanpa JavaScript

Ada cara yang sangat sederhana untuk menyediakan fungsionalitas tersebut kepada pengguna. Metode ini tidak memerlukan penggunaan perpustakaan atau skrip tambahan apa pun dan dilakukan secara eksklusif menggunakan HTML dan, jika diinginkan, menggunakan CSS, dengan membuat tautan internal biasa.

Untuk melakukan ini di mana saja di bagian bawah halaman Anda, cukup tambahkan kode berikut:

^Atas

Contoh kode CSS:

Tombol atas ( lebar:100px; batas:2px solid #ccc; latar belakang:#f7f7f7; perataan teks:tengah; padding:10px; posisi:tetap; bawah:50px; kanan:50px; kursor:penunjuk; warna:#333; font -keluarga:verdana; ukuran font:12px; -moz-batas-radius: 5px; -webkit-batas-radius: 5px;

Kekurangan:

Tombol yang dibuat menggunakan JavaScript bisa mengambang dan langsung muncul begitu pengguna bergerak sedikit ke bawah halaman, namun pada contoh di atas akan ditampilkan terus-menerus.

Pengguliran tidak akan mulus dan setelah mengklik pengguna akan langsung diarahkan ke bagian atas halaman.

Kelebihan tombol jenis ini:

Untuk mengoperasikan tombolnya, Anda tidak perlu menggunakan skrip atau perpustakaan besar. Dan ini merupakan nilai tambah yang sangat besar.

2. Tombol kembali ke atas menggunakan jQuery

Tombol ini diimplementasikan dengan cukup sederhana. Untuk pengoperasiannya Anda memerlukan perpustakaan jQuery, skrip kecil yang berisi acara jQuery, gaya tertentu, dan tag DIV yang berisi teks itu sendiri dan ID yang diperlukan.

Tombol ini berfungsi di browser mulai dari Versi Firefox 3.0.10 - 3.6.13, Penjelajah Internet 7 dan 8, Google Chrome,Jquery 1.4.3. Sayangnya tombol tersebut tidak berfungsi di IE 6, tetapi apakah Anda memerlukannya :)?

Kode JavaScript JQuery:

Anda perlu memasukkan kode di bawah ini sebelum tag di semua halaman situs Anda. Jika perpustakaan jQuery sudah terhubung ke situs Anda, maka Anda tidak perlu menambahkan baris pertama.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(function() ( $("body,html").animate((scrollTop:0),800); )); ));

Untuk memberikan tampilan cantik pada tombol, Anda perlu menambahkan gaya berikut. Ini paling baik ditambahkan ke stylesheet situs Anda.

#toTop ( width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* tombol indentasi dari tepi bawah halaman*/ kanan:10px ; kursor:penunjuk; warna:#333;

Untuk memanggil tombol tersebut, tambahkan kode HTML berikut sebelum tag.

^ Atas

3. Plugin JQuery UItoTop

Sebuah plugin sederhana yang berfungsi penampilan halus tombol dan pengguliran halus ketika Anda menekannya. Untuk menggunakan plugin di situs Anda, tidak perlu menambahkan tag apa pun ke markup halaman HTML. Yang harus Anda lakukan adalah menghubungkan semuanya file yang diperlukan plugin dan itu akan berfungsi.

Sumber

Arsip yang disajikan berisi 3 folder: css - file gaya tombol, img - gambar dan folder js yang berisi 4 file JavaScript.

Koneksi file JavaScript:

Buka kemasan arsip yang diunduh dengan sumber ke dalam folder mana pun di situs Anda. Untuk menggunakan plugin tersebut, kita hanya perlu menghubungkan tiga file js yang tersedia. Untuk menyertakannya, tambahkan jalur file berikut sebelum tag penutup:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // id elemen memudar containerHoverID: "toTopHover", // elemen memudar id hover scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" ));

Perbaiki jalur menuju file sesuai dengan direktori tempat file plugin berada.

Harap dicatat bahwa jika sebelumnya Anda telah menghubungkan perpustakaan jQuery ke situs Anda, maka Anda tidak perlu menambahkan kode berikut:

Menambahkan CSS:

Langkah selanjutnya adalah menambahkan gaya CSS, tanpanya tombol tidak akan berfungsi. Ada dua cara untuk menghubungkannya.

Cara pertama adalah dengan menambahkan link ke file gaya CSS di antara tag di semua halaman situs Anda:

Ingatlah untuk mengubah jalur file.

Cara kedua adalah dengan mengcopy seluruh isi file ui.totop.css dan paste ke file stylesheet CSS situs Anda. Cara kedua akan lebih rasional karena tidak memerlukan koneksi file yang tidak perlu.

4. Tombol gulir ke atas dan ke bawah pada JQUERY

Solusi ini memungkinkan Anda untuk berpindah ke bawah dan ke atas halaman karena terdiri dari dua tombol. Tombol-tombolnya terletak tepat di sisi kiri halaman. Saat menggulir, tombol berkedip dengan lancar. Anda dapat melihat efek ini dengan melihat demo.

Sumber

Arsip yang diunduh akan berisi semua file yang diperlukan agar tombol tersebut berfungsi. Ini adalah file CSS, JS, dan file gambar panah.

Hubungkan HTML:

Pertama, Anda perlu menempatkan kode HTML untuk memanggil tombol di semua halaman situs. Untuk melakukan ini, letakkan teks di bawah tepat sebelum tag.

Koneksi JavaScript:

Segera setelah kode HTML, sebelum tag, tempatkan kode untuk memanggil file JavaScript dan kode JQuery yang diperlukan.

$(fungsi() ( var $elem = $("#content"); $("#nav_up").fadeIn("lambat"); $("#nav_down").fadeIn("lambat"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); $(window). mengikat ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"1")); )); $("#nav_down"). klik( fungsi (e) ( $("html, body").animate((scrollTop: $elem.height()), 800); )); $("#nav_up").click(function (e) ( $( "html, body").animate((scrollTop: "0px"), 800 ));

Jalur menuju file JS harus diganti dengan jalur Anda sendiri.

Baris kode pertama menyertakan perpustakaan JQuery, jadi jika Anda sudah menghubungkannya ke situs Anda sebelumnya, maka Anda harus menghapusnya.

Berikutnya adalah koneksi file JS lain dan kode yang berisi fungsi tertentu, yang perlu dipertimbangkan lebih detail. Karena dengan bantuan mereka Anda dapat mengubah beberapa parameter tombol. Di bawah ini adalah kode beserta penjelasannya:

// konten adalah pengidentifikasi div yang di dalamnya semua konten yang harus digulir harus berada. Jika semua konten halaman situs Anda berada dalam id yang berbeda, maka Anda dapat memasukkannya di sini, karena tanpa ini tombolnya akan hilang. tidak berfungsi $(function( ) ( var $elem = $("#content"); // menggunakan dua baris berikutnya, tombol ditampilkan $("#nav_up").fadeIn("slow"); $(" #nav_down").fadeIn(" slow"); // saat menggulir, tombol memiliki efek memudar, ini diterapkan dengan mengubah transparansinya, jadi dengan mengubah indikator 0,2 dalam kisaran 0,1 menjadi 1, Anda dapat menyesuaikannya transparansi $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); // di sini Anda dapat menyesuaikan transparansi yang sama, tetapi saat tombol ditekan hanya ditampilkan di halaman, nilai defaultnya adalah 1 $(window).bind("scrollstop", function())( $("#nav_up, #nav_down").stop().animate(("opacity":"1" )); )); // dengan mengubah angka 800 Anda dapat menambah atau mengurangi kecepatan gulir halaman $("#nav_down"). klik(fungsi (e) ( $("html, body").animate((scrollTop: $elem .height()), 800);

)); // sama seperti di atas tetapi untuk menggulir ke bawah $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) );

));

Koneksi CSS: Untuk menambahkan CSS, cukup sambungkan file style.css yang terletak di arsip sumber ke halaman situs: Dan sebagian besar

pilihan terbaik

akan menyalin gaya file ini dan menempelkannya ke file gaya situs Anda.

5. Tombol Gulir Ke Atas Halus Menggunakan JQuery

Pilihan lain untuk mengatur pengguliran konten halaman dengan lancar, dari bawah ke atas, menggunakan JQuery. Tombol ini terletak di kanan bawah halaman dan hanya muncul jika Anda menggulir halaman sedikit ke bawah. Semuanya diimplementasikan menggunakan sepotong kecil kode CSS dan JS, serta gambar kecil yang digunakan sebagai tombol.

Saya suka tombol ini karena pembuatannya tidak memerlukan skrip dalam jumlah banyak dan memiliki efek yang bagus.

Sekarang mari kita cari tahu apa yang perlu dilakukan untuk menghubungkan tombol ke situs

Gambar:

Atas

Scrollup( lebar:40px; tinggi:40px; opacity:0.3; posisi:tetap; bawah:50px; kanan:100px; tampilan:tidak ada; indentasi teks:-9999px; latar belakang: url("icon_top.png") tanpa pengulangan ;

Dengan kode ini, kecuali penampilan kita menentukan posisi tombol dan mengatur padding menjadi 100 px dari kanan dan 50 px dari bawah. Yang terbaik adalah menambahkannya ke stylesheet situs Anda.

Pertama, kami menghubungkan perpustakaan jika belum terhubung untuk situs Anda. Untuk tujuan ini antar tag...? masukkan yang berikut ini:

Kemudian, segera setelah menyertakan perpustakaan, Anda perlu menempatkan kode JQuery berikut:

$(dokumen).siap(fungsi())( $(jendela).scroll(fungsi())( if ($(ini).scrollTop() > 100) ( $(".scrollup").fadeIn(); ) lain ( $(".scrollup").fadeOut(); ) ); $(".scrollup").klik(fungsi())( $("html, body").animate(( scrollTop: 0 ), 600) ; mengembalikan salah; ));

ScrollTop pertama - menentukan posisi vertikal bilah gulir saat ini dan jika ukurannya lebih dari 100 piksel, tombol akan muncul secara otomatis. Jika Anda ingin menampilkannya lebih awal atau lebih lambat, ubah nilai ini seperlunya.

Seperti yang Anda lihat, ada dua parameter lagi - 0 - yang berarti halaman akan bergulir ke atas hingga piksel nol, dan 600 - ini adalah kecepatan animasi dalam milidetik.

Sumber: http://gazpo.com/2012/02/scrolltop/

6. Tombol animasi atas

Saat Anda menggulir halaman ke bawah sejumlah karakter tertentu, itu tombol besar dengan panah. Saat Anda mengarahkan kursor, tombol akan menyala dengan mulus, dan saat Anda mengklik, tombol akan bergulir ke atas dengan mulus.

Gambar panah, gaya CSS, dan JQuery digunakan untuk membuat tombol.

Saya suka tombol ini karena pembuatannya tidak memerlukan skrip dalam jumlah banyak dan memiliki efek yang bagus.

Kode HTML:

Untuk memanggil tombol tersebut, gunakan kode HTML berikut:

Kembali ke Atas

Namun Anda harus meletakkannya tepat sebelum konten utama halaman; jika Anda menempatkannya sebelum tag penutup, tombol tersebut tidak akan berfungsi.

Dan satu lagi poin penting mengenai kode HTML. Anda harus menetapkan pengidentifikasi top ke tag.

Jika tag sudah diberi id tertentu, maka pada kode pemanggil tombol yang terletak tepat di atas, #top harus diganti dengan #id-Anda

Pada bantuan CSS indentasi dan tampilan tombol diatur, properti transisi ditambahkan: untuk membuat efek penundaan saat mengarahkan kursor. Lebih baik memasukkannya ke dalam file CSS situs Anda.

#back-top ( posisi: tetap; bawah: 30px; margin-kiri: -150px; ) #back-top a ( lebar: 108px; tampilan: blok; perataan teks: tengah; font: 11px/100% Arial, Helvetica , sans-serif; dekorasi teks: tidak ada; /* transisi */ -moz-transisi: 1s; a:hover ( warna: #000; ) /* ikon panah (tag rentang) */ #rentang belakang-atas ( lebar : 108px; tinggi: 108px; tampilan: blok; margin-bawah: 7px; latar belakang: #ddd url( panah atas.png) pusat tengah tanpa pengulangan /* sudut membulat */ -webkit-border-radius: 15px; moz-border-radius: 15px; /* transisi */ -webkit- transisi: 1s; -moz-transition: 1s; transisi: 1s;

$(document).ready(function())( // sembunyikan #back-top dulu $("#back-top").hide(); // memudarkan #back-top $(function () ( $( jendela ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top"). fadeOut (); 800 ); mengembalikan salah; ));

Baris pertama menghubungkan perpustakaan JQuery, jika Anda sudah menghubungkannya, jangan tambahkan baris ini. Tambahkan sisa kode di antara tag...

Jika perlu, Anda dapat mengubah parameter berikut:

100 adalah jumlah piksel setelah tombol muncul setelah digulir;
0 - ini berarti pengguliran akan dilakukan hingga piksel nol, yaitu ke paling atas.
800 adalah kecepatan gulir dalam milidetik.

7. Tombol tembus pandang menggunakan JQuery dan CSS

Tombol besar tembus pandang muncul saat menggulir di tengah halaman. Sulit untuk tidak memperhatikannya. Dibuat hanya menggunakan JQuery dan CSS.

Mari kita memahami HTML:

Agar tombol berfungsi, konten halaman utama yang perlu digulir harus ditempatkan di antara dua tag:

Tidak ada yang istimewa di sini, cukup tempelkan kode ini ke file gaya CSS situs Anda.

#pesan a ( /* tampilan: blok sebelum disembunyikan */ tampilan: blok; tampilan: tidak ada; /* tautan berada di atas semua elemen lainnya */ z-index: 999; /* tautan tidak menyembunyikan teks di baliknya */ opacity : .8; /* tautan tetap di tempat yang sama di halaman */ posisi: tetap; /* tautan berada di bagian bawah halaman */ atas: 100%; */ /* tautan berada di tengah */ kiri: 50%; margin-kiri: -160px; /* = setengah lebar */ /* membulatkan sudut (sesuai keinginan Anda) */ -moz-border-radius: 24px ; -webkit-border-radius: 24px; /* membuatnya besar dan mudah dilihat (ukuran, gaya sesuai preferensi) */ lebar: 300px; tinggi: 48px #000;

$(function () ( /* mengatur variabel secara lokal untuk meningkatkan kinerja */ var scroll_timer; var ditampilkan = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; /* bereaksi terhadap acara gulir di jendela */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () ( if($window.scrollTop() batas) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));

Sentuhan terakhir adalah mengikat acara klik ke tombol “Kembali ke Atas”. Ketika kita mengklik tombol tersebut, kita akan dibawa ke awal halaman saat ini. Kami akan melakukan ini dengan beberapa baris kode:

// gulir badan ke 0px saat klik $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));

Seperti inilah keseluruhan kodenya

Batas var = $(jendela).height()/3, $backToTop = $("#back-to-top");

$(window).scroll(function () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));

// gulir badan ke 0px saat klik $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
Kesimpulan

Jadi kita telah selesai mengerjakan pembuatan tombol “Kembali ke Atas”. Ini hanyalah salah satu opsi, yang dapat Anda diversifikasi dengan membuat perubahan pada bagian CSS pada postingan ini. Artikel demo menggunakan efek CSS yang dijelaskan dalam postingan ini

Halo! Contoh scriptnya bisa dilihat pada blog ini ketika anda scroll halamannya ke bawah,

Tiga poin kecil untuk pemasangan yang benar:

Pengkodean situs harus dalam UTF-8, jika berbeda, maka alih-alih huruf Rusia akan ada clunker yang tidak dapat dipahami

Perpustakaan jquery harus disertakan di situs. Anda dapat menghubungkannya dengan memasukkan kode berikut ke templat situs sebelum "":

Jika Anda memiliki z-index pada desain website Anda (tanda bahwa gambar tidak terlihat (atau terlihat, tetapi hanya di beberapa area website)), Anda perlu menambahkan baris berikut di style website: #topcontrol( indeks-z: 9999;)

Jika Anda perlu mengubah posisi gambar, gunakan gaya margin: #topcontrol(margin-bottom: 50px;)

Js">

0.js">

1.js">

2.js">

3.js">

4.js">

Js">

6.js">

7.js">

8.js">

9.js">

0.js">

1.js">

2.js">

3.js">

4.js">

5.js">

6.js">

7.js">

Tombol "Kembali ke Atas" sederhana tanpa JavaScript

Untuk melakukan ini di mana saja di bagian bawah halaman Anda, cukup tambahkan kode berikut:

Dalam gaya situs Anda, biasanya terletak di file style.css, Anda perlu memasukkan: .topbutton ( width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding: 10px; posisi: tetap; bawah :50px; kursor:penunjuk; font-family:verdana; radius batas: 5px;

Kekurangan:

Tombol yang dibuat menggunakan JavaScript bisa mengambang dan langsung muncul begitu pengguna bergerak sedikit ke bawah halaman, namun pada contoh di atas akan ditampilkan terus-menerus.

Pengguliran tidak akan mulus dan setelah mengklik pengguna akan langsung diarahkan ke bagian atas halaman.

Kelebihan tombol jenis ini:

Untuk mengoperasikan tombolnya, Anda tidak perlu menggunakan skrip atau perpustakaan besar. Dan ini merupakan nilai tambah yang sangat besar.

Tombol gulir ke atas dan ke bawah di JQUERY

Judul: Tombol gulir ke atas dan ke bawah di JQUERY
Tautan: 57,72 KB
Format: arsip ZIP

Arsip yang diunduh akan berisi semua file yang diperlukan agar tombol tersebut berfungsi. Ini adalah file CSS, JS, dan file gambar panah.

Tombol Gulir Ke Atas Halus Menggunakan JQuery

akan menyalin gaya file ini dan menempelkannya ke file gaya situs Anda.

5. Tombol Gulir Ke Atas Halus Menggunakan JQuery

Gambar:

Anda memerlukan gambar tombol itu sendiri, Anda dapat mengambil apa saja, atau Anda dapat menggunakan ini:

Kode HTML:

Untuk memanggil tombol setelah konten halaman utama atau sebelum tag, tempatkan kode HTML berikut:

Gaya CSS:

Scrollup( lebar:40px; tinggi:40px; opacity:0.3; posisi:tetap; bawah:50px; kanan:100px; tampilan:tidak ada; indentasi teks:-9999px; latar belakang: url("icon_top.png") tanpa pengulangan ;

Dengan menggunakan kode ini, selain tampilannya, kita menentukan posisi tombol dan mengatur padding menjadi 100 px dari kanan dan 50 px dari bawah. Yang terbaik adalah menambahkannya ke stylesheet situs Anda.

Pertama, kami menghubungkan perpustakaan jika belum terhubung untuk situs Anda. Untuk tujuan ini antar tag...? masukkan yang berikut ini:

Kemudian, segera setelah menyertakan perpustakaan, Anda perlu menempatkan kode JQuery berikut:

Seperti yang Anda lihat, ada dua parameter lagi - 0 - yang berarti halaman akan bergulir ke atas hingga piksel nol, dan 600 - ini adalah kecepatan animasi dalam milidetik.