css3返回顶部-模拟JD返底功能

bendan520 css3

2023-09-01 0 1,199 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

模拟JD回底功能css3返回顶部，添加隐藏在一定高度内的功能。

返回底部的后端实现。主要内容包括：后端样式（html布局）、治疗效果展示（CSS3动画）、治疗效果展示脚本编写（javascript编译）

超文本标记语言




    
    仿JD返回<a href="https://www.wkzy.net/game/tag/%e9%a1%b6%e9%83%a8" title="查看所有文章关于 顶部"target="_blank">顶部</a>
    
    
    



    
        
            
                
                    
                    留言
                
                
                    
                    客服
                
                
                    
                    顶部

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;
}

返回底部添加显示和隐藏功能css3返回顶部，您可以根据需要修改显示和隐藏效果。

$(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;
    });
})

收藏 (0) 打赏

感谢您的支持，我会继续努力的!