模擬JD返回頂部功能

時間 2019-12-06

標籤模擬返回頂部功能欄目 Java 简体版

原文原文鏈接

模擬JD返回頂部功能，添加在必定高度內隱藏功能。javascript

返回頂部的前端實現。涵蓋的內容主要：前端樣式（html排版），展現效果（CSS3 動畫），以及展現效果腳本的編寫（javascript編寫）css

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>仿JD返回頂部</title>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="jd-global-toolbar">
    <div class="jd-toolbar-wrap">
        <div class="jd-toolbar-tabs">
            <div class="jd-toolbar">
                <div class="jd-toolbar-tab jd-tab-vip">
                    <i class="tab-ico"></i>
                    <em class="tab-text">留言</em>
                </div>
                <div class="jd-toolbar-tab jd-tab-follow">
                    <i class="tab-ico"></i>
                    <em class="tab-text">客服</em>
                </div>
                <div class="jd-toolbar-tab jd-tab-top jd-disno" id="returnTop">
                    <i class="tab-ico"></i>
                    <em class="tab-text">頂部</em>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS
須要根據本身的背景圖，修改背景位置。

@charset "utf-8";
/**********************
 *CSS Animations by:
 * JD側邊欄
 * ljc
***********************/

body {
    margin: 0;
    padding: 0;
    height: 2000px;
}

i, em {
    font-style: normal;
}

.jd-disno{
    display: none ;
}

.jd-toolbar-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9990;
    width: 0;
    height: 100%;
}

.jd-toolbar-tabs {
    position: absolute;
    top: 82%;
    left: -35px;
    width: 35px;
    margin-top: -61px;
}

.jd-toolbar-tab {
    position: relative;
    width: 35px;
    height: 35px;
    margin-bottom: 1px;
    cursor: pointer;
    background-color: #7a6e6e;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.jd-toolbar-tab .tab-ico {
    width: 34px;
    height: 35px;
    margin-left: 1px;
    position: relative;
    z-index: 2;
    background-color: #7a6e6e;
    _display: block;
}

.jd-toolbar-tab .tab-ico {
    display: inline-block;
    background-image: url("../img/toolbars1.png");
    background-repeat: no-repeat;
}

.jd-toolbar-tab .tab-text {
    width: 62px;
    height: 35px;
    line-height: 35px;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: "微軟雅黑";
    position: absolute;
    z-index: 1;
    left: 35px;
    top: 0px;
    background-color: rgb(122, 110, 110);
    border-radius: 3px 0px 0px 3px;
    /*移出動畫效果*/
    transition: left 0.3s ease-in-out 0.1s;
}

.jd-toolbar-tab-hover {
    background-color: #c81623;
}

.jd-toolbar-tab-hover .tab-ico {
    background-color: #c81623;
}

.jd-toolbar-tab-hover .tab-text {
    left: -60px;
    background: #c81623;
}

.jd-toolbar-tab-hover .tab-texts {
    left: -108px;
    background: #c81623;
}
/* 根據本身的背景圖，修改背景位置。*/
.jd-tab-vip .tab-ico {
    background-position: -2px -45px;
}

.jd-tab-follow .tab-ico {
    background-position: -3px -86px;
}

.jd-tab-top .tab-ico {
    background-position: -4px -170px;
}

.jd-tab-vip img {
    margin-top: 1px;
}

JS
返回頂部添加顯示隱藏功能，可根據需求更改顯示隱藏效果。

$(function(){

//右側固定欄
    var $jdToolbar = $(".jd-global-toolbar .jd-toolbar-tab");
    $jdToolbar.hover(function(){
        //鼠標移入添加class
        $(this).addClass("jd-toolbar-tab-hover");
    },function(){
        //鼠標移除若是含有class，則移除
        if($(this).hasClass("jd-toolbar-tab-hover")){
            $(this).removeClass("jd-toolbar-tab-hover");
        }
    });

//返回頂部在必定高度內隱藏
    $(window).scroll(function(){
        var docHe= $(window).scrollTop();
        var hideH = 600;
        if (docHe < hideH){
            $("#returnTop").slideUp(1000);
        }else{
            $("#returnTop").slideDown(1000);
        }
    })


//右側固定欄，返回頂部
    $("#returnTop").click(function () {
        var speed=200;//滑動的速度
        //添加返回頂部的動畫效果
        $('body,html').animate({ scrollTop: 0 }, speed);
        return false;
    });

})

若有問題，歡迎你們交流指正。QQ：1357912285html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。