回到顶部功能

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30364147

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量73

点赞数

文章标签： javascript ViewUI

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

版权

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渐出
        }
});
});