recherche

Maison  >  Article  >  interface Web  >  Utilisez jquery pour implémenter une animation permettant de passer en haut et en bas (c'est relativement simple)_jquery

Utilisez jquery pour implémenter une animation permettant de passer en haut et en bas (c'est relativement simple)_jquery

WBOY
WBOYoriginal
2016-05-16 16:38:091245parcourir

Lorsque l'on clique sur le bouton du haut, la méthode est exécutée. L'attribut scrollTop obtient la distance entre l'étiquette sélectionnée et la barre de défilement. Lorsque l'on clique sur l'étiquette du bas, la méthode est exécutée. l'élément correspondant dans la fenêtre actuelle 

<!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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une brève analyse des différences entre html(), text() et val() dans JQuery_jqueryArticle suivant：Une brève analyse des différences entre html(), text() et val() dans JQuery_jquery

Articles Liés

Voir plus