自动显示隐藏返回顶部功能

功能描述：

当通过浏览器拖动滚动条后，自动显示“返回顶部”图标，当点击“返回顶部”图标后，自动隐藏图标

代码如下：

在页面头文件中引入jquery

[html]

<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

[html]

/**

*锚点控制

*/

$(document).ready(function () {

$("body").attr("id", "top");

var tpHtml = " <div id='topcontrol' style=' display:none; position: fixed; bottom: 30px; right: 20px; cursor: pointer;' title='返回顶部'><a style='background: url(../images/gotop.gif)
no-repeat scroll 0 0 transparent;color: #FFFFFF;display: inline-block;font-size: 0;height: 54px;text-decoration: none;width: 54px;' href='#top'> </a></div>";

$("body").append(tpHtml);

$(window).scroll(function () {

if ($(window).scrollTop() > 400) {

$("#topcontrol").fadeIn();

}

else if ($(window).scrollTop() == 0) {

$("#topcontrol").fadeOut();

}

});

$("#topcontrol").click(function () {

$(this).fadeOut();

});

/***************************/