hujung hadapan web
tutorial js
jquery melaksanakan kesan pulangan ke atas yang biasa digunakan pada pages_jquery
jquery melaksanakan kesan pulangan ke atas yang biasa digunakan pada pages_jquery
May 16, 2016 pm 03:12 PMContoh dalam artikel ini berkongsi dengan anda semua kod untuk jquery untuk mencapai kesan kembali ke atas untuk rujukan anda. Kandungan khusus adalah seperti berikut
Rendering:
Kod pelaksanaan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 当滚动条滚动大于200时出现，未大于，消失
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
},1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
},1000)
}
})
// 返回顶部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>
Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat
Feb 27, 2024 pm 06:45 PM
Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Feb 28, 2024 am 08:39 AM
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Analisis mendalam: kelebihan dan kekurangan jQuery
Feb 27, 2024 pm 05:18 PM
Analisis mendalam: kelebihan dan kekurangan jQuery
Fahami peranan dan senario aplikasi eq dalam jQuery
Feb 28, 2024 pm 01:15 PM
Fahami peranan dan senario aplikasi eq dalam jQuery
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
