JS与CSS返回顶部的应用

程序猿 JS分享 ... (shuke.2013-08-19 08:53)

JS下拉时显示返回顶部
应用文件 jquery-1.4.2.min.js 百度一下就可以下载了。

 <STYLE TYPE="text/css">
	.top_arrow {border: 0 none;
    bottom: 150px;
    cursor: pointer;
    display: block;
    height: auto;
    margin: 0;
    opacity: 0.5;
    padding: 0;
    position: fixed;
    right: 40px;
    width: 35px;
    z-index: 2147483647;
}
  </STYLE>
  <img alt="返回顶部" id="top_arrow" class="top_arrow" src="http://news.csdn.net//images/top_arrow.png" >
<script src="http://www.csdn.net/js/jquery-1.4.2.min.js" type="text/javascript"></script>
	 <script type="text/javascript">
      $(document).ready(function(){

//首先将#top_arrow隐藏
    $("#top_arrow").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>100){
                $("#top_arrow").fadeIn(400);
            }
            else
            {
                $("#top_arrow").fadeOut(400);
            }
        });

//当点击跳转链接后，回到页面顶部位置

        $("#top_arrow").click(function(){
            $('body,html').animate({scrollTop:0},400);
            return false;
        });
    });
});
      </script> 

2 楼 shuke[2013-08-19 08:56]

纯CCS方法，在IE里圆角就木有了。

<STYLE TYPE="text/css">
.top-link:link, .top-link:visited {
    background: none repeat scroll 0 0 #222222;
    border-radius: 10px 10px 0 0;
    bottom: 0;
    color: white;
    display: block;
    font-size: 14px;
    height: 30px;
    padding: 8px 16px 0;
    position: fixed;
    right: 2%;
    text-decoration: none;
}
  </STYLE><a id="top-link" class="top-link" href="#top">▲ Top</a>

进度：100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

【原创】jquery-1.4.2 实现元素下拉时固定浮动于顶部代码

图片新热点

导航

• 模块
• 服务器应用
• 软件应用
• 设计师
• 程序猿
• 推广课程
• 制作
• 分享
• 原创
• 黑板报
• 运营与帮助
• 微平台
• 生活小百科