ScrollTop – 滑動效果 – wordpress

資源：來自網路上，自學用。

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrolltop-滑動效果</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body style="height: 2000px;">

    <div class="actGotop"><a href="javascript:;" title="返回頂部"></a></div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 100) {
                    $('.actGotop').fadeIn(300);
                } else {
                    $('.actGotop').fadeOut(300);
                }
            });
            $('.actGotop').click(function () {
                $('html,body').animate({ scrollTop: '0px' }, 800);
            });
        });
    </script>
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a, img{
    border: 0;
}
body{
    background: url(../img/videobg.png);
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}

/* actGotop */
.actGotop{
    position: fixed;
    /* _position:absolute; */
    bottom: 100px;
    right: 50px;
    width: 150px;
    height: 195px;
    display: none;
}
.actGotop a,.actGotop a:link{
    width: 150px;
    height: 195px;
    display: inline-block;
    background: url(../img/gotop.png) no-repeat;
    outline: none;
}
.actGotop a:hover{
    background: url(../img/gotop.png) no-repeat;
    outline: none;
}