网站怎么制作返回顶部按钮

    网站如何制作“返回顶部”按钮（附代码）

 

    “返回顶部”按钮是用于网站版面过长时，用户点击后直接拉到网站的顶部，可以节省网站用户拖动的时间。

 

    今天搜一客教大家制作“返回顶部”按钮，它可以自动判断用户所处的网页的位置，如果在顶部，则不显示“返回顶部”按钮，如果不在顶部，则显示出“返回顶部”按钮。如下图：

 

 

 

    方法/步骤

 

    在HTML页面底部添加以下的代码，用于显示一个“返回顶部”按钮。【如果你不懂HTML，可以学习一下html入门教程】

 

    <div id="goTopBtn"><span class="glyphicon glyphicon-chevron-up">&Delta;</span></div>

 

    在CSS样式中添加以下的CSS代码，用于控制“返回顶部”按钮的样式。【如果不懂CSS，可以学习一下CSS视频教程】

 

    #goTopBtn {position: fixed;line-height: 46px;text-align: center;width: 46px;bottom: 35px;height: 46px;cursor: pointer;background: #fff;display: none;border-radius: 6px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.13);font-size:22px;color:#999;}

 

    在网页的底部放上以下的jquery代码，用于控制“返回顶部”按钮什么时候显示，什么时候隐藏。

 

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 

    <script>

 

    /*返回顶部*/

 

    $(window).scroll(function(){

 

    var sc=$(window).scrollTop();

 

    var rwidth=$(window).width()

 

    if(sc>0){

 

    $("#goTopBtn").css("display","block");

 

    $("#goTopBtn").css("left",(rwidth-36)+"px")

 

    }else{

 

    $("#goTopBtn").css("display","none");

 

    }

 

    })

 

    $("#goTopBtn").click(function(){

 

    var sc=$(window).scrollTop();

 

    $('body,html').animate({scrollTop:0},500);

 

    })

 

    </script>

 

    通过放上以上三段代码，就可以在自己建网站时，制作出“返回顶部”按钮了。如果觉得按钮图标不好看，可以自己去下载一个“向上”的图标进行替换。或者学习我们的零基础建站培训课程，制作出更多网站功能。