程序人生

点击右下角按钮回到页面顶部实例

时间:2020/12/13 17:20:04  作者:枫叶  来源:solgle.com  查看:291  评论:4
内容摘要:最近对网站又做一点改进,当页面向下拖动滚动条的时候,会出现回到顶部的按钮,通常这个按钮呈现漂浮状,通常出现在页面的右下角。如果是用的div,这个做起来就不难了,比较简单,下面是这个div的设计代码...
最近对网站又做一点改进,当页面向下拖动滚动条的时候,会出现回到顶部的按钮,通常这个按钮呈现漂浮状,出现在页面的右下角。
 
如果是用的div,这个做起来就不难了,比较简单,下面是这个div的设计代码
 
<div onclick='javascript:;' id='btnTotop'>
   <img src='totop.gif' 
      style='width: 2rem;height: 2rem;position: fixed;bottom: 2rem;right: 2rem;z-index: 9999;' />
</div>
 
在加上js代码,那这个小控件的功能就出效果了
 
<script language='javascript' type='text/javascript'>
//js主要脚本实现
$(document).ready(function() {
    //首先将#btn隐藏
    $("#btnTotop").hide();
    //当滚动条的位置处于距顶部50像素以下时,到达顶部的按钮就出现,否则就隐藏,看不见
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
          $("#btnTotop").fadeIn(200);
        } else {
          $("#btnTotop").fadeOut(200);
        }
      });
      //当点击该按钮后,将回到页面顶部位置
      $("#btnTotop").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        500);
        return false;
      });
    });
});
</script>
 
以上都是经过使用,能行得通,靠谱的脚本。如果你刚好浏览到本页面,正好可以看到该项功能的效果。
 
 
 
标签:点击回到顶部 

solgle.com 版权所有,欢迎分享!!!

相关文章
    相关评论
     img1 img2 img3 img4 img5 img6 img7 img8 img9 img10
    评论者:      验证码:  点击获取验证码
       Copyright © 2013-2028 solgle.com,All rights reserved.[solgle.com] 公安机关备案号:51010802000219
    Email:solgle@solgle.com; weixin:cd1008610000 ICP:蜀ICP备14011070号-1