零基础学做网站培训介绍

当前位置:

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

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

今天学做网站论坛教大家制作“返回顶部”按钮,它可以自动判断用户所处的网页的位置,如果在顶部,则不显示“返回顶部”按钮,如果不在顶部,则显示出“返回顶部”按钮。如下图:

“返回顶部”按钮

方法/步骤

  1. 在HTML页面底部添加以下的代码,用于显示一个“返回顶部”按钮。【如果你不懂HTML,可以学习一下html入门教程
    
    
    <div id="goTopBtn"><span class="glyphicon glyphicon-chevron-up">&Delta;</span></div>
  2. 在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;}
  3. 在网页的底部放上以下的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>

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

相关阅读:

如何制作网站中的“返回顶部”(带缓冲)功能

网页缓慢返回顶部的JS代码

“返回顶部”按钮制作方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注