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

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Back to toptitle>
    <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 页面底部的返回顶部按钮)