이번에는 Back to Top 기능을 구현하기 위한 jQuery를 소개하겠습니다. jQuery에서 Back to Top 기능을 구현하기 위한 주의사항은 무엇인가요?
<!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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 jQuery는 맨 위로 돌아가기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!