码迷,mamicode.com
首页 > 其他好文 > 详细

回到顶部功能

时间:2016-07-31 00:05:33      阅读:237      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!