侧栏菜单滑动及返回顶部效果

侧栏菜单

当点击侧栏菜单时，侧栏从右侧平缓划出并且遮罩层使整个页面变暗。

选择侧栏触发器 $('#sidebar_trigger') ,监听点击事件触发 showSideBar() ,使遮罩层$('.mask') 和$('#sidebar') 都显示出来。
然后再对遮罩层$('.mask') 监听点击事件触发hideSideBar(),使遮罩层$('.mask') 和$('#sidebar') 隐藏。

       function showSideBar(){
            // console.log('clicked');
            mask.fadeIn();          //显示mask
            sidebar.css('right',0);    //显示sidebar
            // sidebar.css('transform','translate(0,0)');
        }

        function hideSideBar(){
            mask.fadeOut();           //隐藏mask
            sidebar.css('right',-sidebar.width());//width()     //隐藏sidebar
            // sidebar.css('transform','translate('+'sidebar.width()'+'px'+',0)');
        }

        // sidebar_trigger.on('click',showSideBar());
        sidebar_trigger.on('click',showSideBar);
        mask.on('click',hideSideBar);

返回顶部

使用jQuery的动画效果函数 animate()来实现平滑滚动到页面顶部的动画效果.

同样，对$('.to-back-top') 监听点击事件，选择$('html,body'),向animate() 中传入一个对象，使滚动条进行滚动到位置0.

backButton.on('click',function(){
            // console.log('back back');
            $('html,body').animate({
                scrollTop:0
            },800);
        });

另外，再监听window的scroll点击事件，即在鼠标滚动的过程中判断已滚动部分的高度值和窗口高度值的大小。如果已滚动的部分高于窗口的高度，显示返回按钮；否则，隐藏返回按钮。

var windowHeight=$(window).height();  //固定值
$(window).on('scroll',function(){
            if($(window).scrollTop() > windowHeight)
                backButton.fadeIn();
            else
                backButton.fadeOut();
        })

由于该事件是在滚动过程中才会被监测，所以重新刷新页面时，返回顶部按钮是显示着的。需要对先让window自动触发scroll事件$(window).trigger('scroll');。最好的解决方式是在css样式中使该按钮display:none;