jquery实现的返回顶部+侧边栏功能

最新推荐文章于 2020-12-20 12:36:43 发布

沉睡的潇洒哥

最新推荐文章于 2020-12-20 12:36:43 发布

阅读量936

点赞数 1

分类专栏：前端文章标签： jquery 返回顶部侧边栏

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的网页侧边栏与返回顶部按钮的实现方法，包括HTML结构定义、CSS样式设置及JavaScript交互逻辑。侧边栏采用固定定位，并通过过渡效果实现展开与收起；返回顶部按钮同样采用固定定位，当页面滚动到一定位置时显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<div class="mask"></div>
<div id="sidebar">
    <ul>
        <li><a href="">item1</a></li>
        <li><a href="">item2</a></li>
        <li><a href="">item3</a></li>
        <li><a href="">item4</a></li>
        <li><a href="">item5</a></li>
    </ul>
</div>

<button class="back-to-top">返回顶部</button>

css代码：

#sidebar{
    position: fixed;
    top:0;
    right: -300px;
    bottom: 0;
    width: 300px;
    background: #333;
    color: #fff;
    padding: 20px 0;
    transition: right 0.5s;

}

#sidebar ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar ul a{
    color: #fff;
    display: inline-block;
    padding: 10px 30px ;
    width: 100%;

}

#sidebar ul a:hover{
    background: #444;
}

.mask{
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    background: rgba(0,0,0,0.2);
    display: none;
}

.back-to-top{
    position: fixed;
    bottom: 30px;
    right: 30px;
    border: 1px solid #888;
    border-radius: 5px;
}

js代码：

;$(function () {
    'use strict';

    var sidebar=$('#sidebar'),
        sidebar_trigger=$('#sidebar-trigger'),
        mask = $('.mask'),
        back_to_top = $('.back-to-top');

    function show_sidebar() {
        mask.fadeIn();
        sidebar.css({'right':'0'});
    }

    function hide_sidebar() {
        mask.fadeOut();
        sidebar.css({'right':-sidebar.width()});
    }

    function back() {
        $('html,body').animate({
            'scrollTop':'0'
        },800);
    }

    sidebar_trigger.on('click',show_sidebar);
    mask.on('click',hide_sidebar);
    back_to_top.on('click',back);

    $(window).on('scroll',function () {
       if($(window).scrollTop() > 0){
           back_to_top.css({
               'display':'block'
           });
       }else{
           back_to_top.fadeOut();
       }
    });

    $(window).trigger('scroll');

});