码迷,mamicode.com
首页 > Web开发 > 详细

jquery back to top 页面底部的返回顶部按钮

时间:2016-08-23 11:26:53      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Back to top</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
    <style type="text/css">
        .back-to-top {
            position: fixed;
            bottom: 50px;
            right: 150px;

            background:url(btn_top.png) no-repeat; 
            
            display: none;
            
            height:49px;
            width:49px;
            cursor: pointer;
        }
        
        body{
            height:1500px;
        }
    </style>
    
</head>
<body>
    
    <div id="back-to-top"  class="back-to-top "></div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {

        $(window).scroll(function () {
            if ($(this).scrollTop() > 0) {
                $(#back-to-top).fadeIn();
            } else {
                $(#back-to-top).fadeOut();
            }
        });

        // scroll body to 0px on click
        $(#back-to-top).click(function () {
            $(body,html).animate({
                scrollTop: 0
            }, 500);
            return false;
        });

    });
</script>

 

另有jquery back to top plugin http://www.igloolab.com/back-to-top/

jquery back to top 页面底部的返回顶部按钮

标签:

原文地址:http://www.cnblogs.com/freeliver54/p/5798311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!