JQuery制作Go To Top按钮

JQuery制作Go To Top按钮

首先当然是设置对应的HTML 代码和CSS效果,具有类似#top的标签,位置吗,当然最好放在footer。

关键部分来了,需要的JQuery代码,具有自动隐藏和平滑返回向上的效果:

    $(document).ready(function(){
         $("#top").hide()//隐藏go to top按钮
         $(function(){
             $(window).scroll(function(){
                 if($(this).scrollTop()>1){//当window的scrolltop距离大于1时,go to top按钮淡出,反之淡入
                     $("#top").fadeIn();
                 } else {
                     $("#top").fadeOut(); 
                }
             });
         }); 

            // 给go to top按钮一个点击事件
         $("#go_top").click(function(){
             $("html,body").animate({scrollTop:0},800);//点击go to top按钮时,以800的速度回到顶部,这里的800可以根据你的需求修改
             return false;
         });
     });

除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/jquery-go-to-top-button/

暂无评论