Jquery操作div上下浮動滾動

將html部分加入到</body>前

<div id="updown">
<div id="up"></div>
<div id="comt"></div>
<div id="down"></div>
</div>

將CSS部分加入到CSS文件中

#updown {
 display:block;
 left:50%;
 margin-left:-520px;  /*設置橫向位置*/
 position:absolute;
 top:40%;  /*設置縱向位置*/
 }
 #up {
 background:url(images/updown.gif) -34px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
#comt {
 background:url(images/updown.gif) no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
 #down {
 background:url(images/updown.gif) -68px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }

在主題文件的js中加入一下部分

jQuery(document).ready(function (a) {
    var c = a("#updown").offset().top;
    $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") : a("body") : a("html,body");
    a(window).scroll(function () {
        a("#updown").animate({
            top: a(window).scrollTop() + c + "px"
        },
 {
     queue: false,
     duration: 500
 })
    });
    a("#up").click(function () {
        $body.animate({
            scrollTop: "0px"
        },
 1000)
    });
    a("#down").click(function () {
        $body.animate({
            scrollTop: a("#footer").offset().top
        },
 1000)
    });
    a("#comt").click(function () {
        $body.animate({
            scrollTop: a("#comments").offset().top
        },
 1000)
    })
});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章