发表评论
博客页面已经添加了此返回页面顶部效果,大家可以滑动滚动条试试效果
代码由88年老陈将提供,有兴趣的可以点他名字去他微博瞧瞧。
使用了jquery和jquery.lazy实现效果,一下是相关代码:
点击下载实例 密码:bf86
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>scrollview.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> .goTop{ position:fixed; display:none; bottom:20px; right:20px; width:50px; height:50px; background:url(image/global.png) no-repeat -165px -145px; text-indent:-9999em; } </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <SCRIPT type="text/javascript"> $(document).ready(function() { var a = $('<a href="#top" class="goTop" >Go to top</a>'); a.click(function() { $("html,body").animate( { scrollTop : 0 }, 700); return false }); $("body").append(a); $(window).scroll(function() { if ($(this).scrollTop() > 300) { a.slideDown("500") } else { a.slideUp("500") } }) }); </SCRIPT> <script type="text/javascript" src="js/component/jquery.lazy.min.js"></script> </head> <body> <div> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> 测试滚动条</br> </div> <script type="text/javascript"> $("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500, visibleOnly: false }); </script> </body> </html>