本站js返回顶部特效

时间：2017-06-13
<html>

<head>

<title>返回顶部特效，滚动条拖至最底部</title>

<script language="javascript" src="jquery-1.6.2.min.js"></script> //自己去下载，或者链接google链接

<script language="javascript">

$(function(){

	    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))

        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {

            $("html, body").animate({ scrollTop: 0 }, 120);

    }), $backToTopFun = function() {

        var st = $(document).scrollTop(), winh = $(window).height();

        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();

        //IE6下的定位

        if (!window.XMLHttpRequest) {

            $backToTopEle.css("top", st + winh - 166);

        }

    };

    $(window).bind("scroll", $backToTopFun);

    $(function() { $backToTopFun(); });

});

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<style>

/*返回顶部*/

.backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);}



</style>

</head>

<body>



<p>往下拉，才会出来</p>

<p>往下拉，才会出来</p>

<p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p>

<p>往下拉，才会出来</p>

<p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p>

</body>

</html>
上一条：js中通过call()和apply()方法实现继承类 下一条:jQuery实现select下拉列表验证和实现反选功能
本站js返回顶部特效

相关文章

最新文章
