这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
话不多说,请看代码:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- JS点击按钮到页面最底部/返回页面顶部代码
- </title>
- <style type="text/CSS">
- #back-to-top{ position: fixed; bottom: 50px; right: 10%; }
- </style>
- </head>
- <body>
- <div style="height: 3000px;">
- </div>
- <div id="back-to-top">
- <a href="#top" rel="external nofollow">
- 返回顶部
- </a>
- </div>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- //首先将#back-to-top隐藏
- $("#back-to-top").hide();
- //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
- $(function() {
- $(window).scroll(function() {
- if ($(window).scrollTop() > 100) {
- $("#back-to-top").fadeIn(100);
- } else {
- $("#back-to-top").fadeOut(100);
- }
- });
- //当点击跳转链接后,回到页面顶部位置
- $("#back-to-top").click(function() {
- $('body,html').animate({
- scrollTop: 0
- },
- "speed");
- return false;
- });
- });
- });
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0527/326801.html