实现返回顶部按钮一直在页面底部(兼容ie6)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script type="text/javascript" src="./jquery-1.8.0.js">script>
    <style type="text/css">
        .back_top {width: 100px; height: 100px; border: 1px solid purple; text-align: center; line-height: 100px; display: none;}
        .change {position: absolute; left: 600px; display: block; cursor: pointer;}
    style>
head>
<body>
    <div style="width:500px; height:2200px; border:1px solid red; margin:0 auto; position:relative;">
        <div style="margin-top:10px; border:1px solid blue;">adiv>
        <div style="margin-top:2140px; border:1px solid blue;">bdiv>

        <div class="back_top">
            返回顶部
        div>
    div>

    <script type="text/javascript">
        $(window).resize(function() {
            $('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height()  + 10);
        });

        $(window).scroll(function() {
            $('.back_top').addClass('change');
            $('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height() + 10);

            if($(window).scrollTop() === 0) {
                $('.back_top').removeClass('change');
            }
        });

        $('.back_top').on('click', function() {
            $(window).scrollTop(0);
        });
    script>
body>
html>

你可能感兴趣的:(底部返回顶部按钮浮动,兼容ie6)