Maison > Article > interface Web > jQuery implémente la fonction de retour en haut
jQuery implémente la fonction de retour en haut
- php中世界最好的语言original
- 2018-04-19 15:18:151658parcourir
Cette fois, je vais vous amener jQuery pour implémenter la fonction retour en haut. Quelles sont les précautions pour que jQuery implémente la fonction retour en haut. Voici un cas pratique, jetons un coup d'œil.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style type="text/css">
body{
width: 100%;
height: 10000px;
}
#totop{
width: 50px;
height: 50px;
line-height: 50px;
background: magenta;
font-size: 20px;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
</body>
<script src="js/jquery-1.8.3.min.js" ></script>
<script>
//写在common.js文件中用来调用即可
//1获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
};
//2获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
};
//3回到顶部
function toTop(n) {
$(window).on('scroll', function() {
//console.log(getScrollTop()+"!"+getScrollHeight());
if ($("#totop").size() > 0) {
if (getScrollTop() < $(window).height() * n) {
$("#totop").remove();
}
} else {
if (getScrollTop() >= $(window).height() * n) {
$("body").after("<p id='totop'>totop</p>");
//插入了新标签 ，记得添加样式！
$("#totop").on('click', function() {
scroll(0,200);
});
}
}
});
};
//xxx.js文件来执行
$(function(){
toTop(2);
})
</script>
</html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
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：Comment utiliser les événements de clavier dans jqueryArticle suivant：Comment utiliser les événements de clavier dans jquery