ホームページ > 記事 > ウェブフロントエンド > jQueryはトップに戻る関数を実装します
今回は、トップに戻る機能を実装するための jQuery について説明します。 jQuery がトップに戻る機能を実装するための 注意事項 について、実際のケースを見てみましょう。
<!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 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がjQueryはトップに戻る関数を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。