jquery点击回到页面顶部方法
Posted Mr_伍先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击回到页面顶部方法相关的知识，希望对你有一定的参考价值。
1.代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-jQuery- 回到顶部案例</title> <style> .bk-top-box { position: fixed; bottom: 40px; right: 10px; cursor: pointer; } </style> <script src="jquery-1.11.3.js"></script> <script> $(function(){ $("#J-bk-top").on(\'click\',function(){ $(window).scrollTop(0); $(window).scrollLeft(0); }); $("#J_Box").on(\'click\',\'h1\',function(){ //this jQuery的事件响应方法中，this指向被点击的 dom对象 this.innerHTML += \'-\'; //dom对象转换成 jQuery对象 $(this).text($(this).text() + 1); }); }); </script> </head> <body> <div class="bk-top-box" id="J-bk-top"> <img src="imgs/bk-top3.jpg" height="44" width="44" alt=""> </div> <!-- ctrl + shift + g 自动包裹标签 --> <div id="J_Box"> <h1>传智播客1</h1> <h1>传智播客2</h1> <h1>传智播客3</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> </div> </body> </html>
2.实际效果
以上是关于jquery点击回到页面顶部方法的主要内容，如果未能解决你的问题，请参考以下文章
在使用jquery的dialog，不知道为啥每次open后，整个页面就会回到顶部(滚动条被滑至最