当前位置:编程学习 > 网站相关 >>

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

功能描述:
当通过浏览器拖动滚动条后,自动显示“返回顶部”图标,当点击“返回顶部”图标后,自动隐藏图标
代码如下:
在页面头文件中引入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(); 
 
}); 
/***************************/ 

 


摘自 文刀乱谈

补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,