首页 > Web开发 > 详细

jquery的返回顶端的功能实现

时间:2016-03-19 16:18:12      阅读:274      评论:0      收藏:0      [点我收藏+]

  页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用。

  具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失。

  实现效果如下图:

  技术分享

  1.布局:

<a id="toTop" class="toTop" href="#"></a>

  2.css代码:

.toTop{
    position: fixed;
    right: 40px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: none;
    background: url(../images/to-top1.png) no-repeat 0px 0px;
}

  3。jquery代码:

<script type="text/javascript">

        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){if ($(window).scrollTop()>100){
                    $("#toTop").fadeIn(500);
                }
                else
                {
                    $("#toTop").fadeOut(500);
                }
            });
 
            //当点击跳转链接后,回到页面顶部位置
 
            $("#toTop").click(function(){
                $(body,html).animate({scrollTop:0},500);
                return false;
            });
        });
 
</script>

 

   既然随笔必须150字,就写一些我之后想总结的东西吧。前端就是H5和js和jquery的深度学习及bootstrap框架的掌握;后端就是java的框架了,因为之前一直搞php,asp.net,现在想把java学深点。

 

jquery的返回顶端的功能实现

原文:http://www.cnblogs.com/rongyux/p/5295357.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!