cari

Rumah >hujung hadapan web >tutorial js >Gunakan jquery untuk melaksanakan animasi untuk melompat ke atas dan bawah (ini agak mudah)_jquery

Gunakan jquery untuk melaksanakan animasi untuk melompat ke atas dan bawah (ini agak mudah)_jquery

WBOY
WBOYasal
2016-05-16 16:38:091268semak imbas

Apabila butang atas diklik, kaedah dilaksanakan Atribut scrollTop memperoleh jarak antara label yang dipilih dan bar skrol Apabila label bawah diklik, kaedah itu dilaksanakan Offset() mendapatkan offset relatif elemen padanan dalam port pandangan semasa 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery-1.8.0.js></script>
<script>
$(document).ready(function () {
//当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离。
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象，有两个属性top,left
//animate,的第二个属性当然我们也可以设置'slow','normal'或'fast'
$('#foot').click(function () {
$('html').animate(
{scrollTop:$('span').offset().top},1000
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot">底部</a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />

<a href="#" id="top">顶部</a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>
Kenyataan：
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
Artikel sebelumnya：Analisis ringkas tentang perbezaan antara html(), text(), dan val() dalam JQuery_jqueryArtikel seterusnya：Analisis ringkas tentang perbezaan antara html(), text(), dan val() dalam JQuery_jquery

Artikel berkaitan

Lihat lagi