首页 > 其他 > 详细

回到顶部功能

时间:2016-07-31 00:02:15      阅读:355      评论:0      收藏:0      [点我收藏+]

RUNJS地址:http://runjs.cn/code/acqs9fdd

主要用了

1.position:fixed;设置标签相对当前窗口的位置。

2.scroll()方法:监听滚动条

3.scrollTop()方法:窗口中滚动条的垂直偏移

html代码:

    <script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jqueryplugins2_jqueryform_282" type="text/javascript" class="library" src="/js/sandbox/jquery-plugins/jquery.form-2.82.js"></script>
<div id="jumptop">
    <a href="#">回到顶部</a>
</div>
<div class="test">
    <div class="test1">
    
    </div>
    <span>到顶部时出现</span>
</div>

 

css代码:

a{
    text-decoration:none;
    color:red;
}
#jumptop{
    position:fixed;
    right:10px;
    bottom:20px;
    display:none;
}
.test{
    height:1000px;
}
.test1{
    height:110px;
}
span{
    color:white;
}

javascript代码:

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>100){
            $("#jumptop").fadeIn(100); //100ms渐入
        }else{
            $("#jumptop").fadeOut(100); //100ms渐出
        }
});
});

 

回到顶部功能

原文:http://www.cnblogs.com/wukall/p/5722099.html

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