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

<!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/

posted on 2016-08-23 10:37  freeliver54  阅读(935)  评论(0)  编辑  收藏  举报

导航