管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

　　要实现该效果，首先要先了解以下几点基础知识：

　　窗体滚动事件：$(window).scroll(function(){...});

　　获取窗体滚动距离：$(window).scrollTop();

　　获取窗体高度：$(window).height();

　　了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了。

　　1.准备界面结构代码：

　　

复制代码 代码如下:

　　<form id="form1" runat="server">

　　<div>

　　<asp:HyperLink ID="Top" runat="server"></asp:HyperLink>

　　<h1 style="text-align: center">

　　利用jQuery实现返回顶部效果</h1>

　　<div style="width: 800px; border: 1px; text-align: left; margin-left: 230px;">

　　。。。。。。(很多内容,可以滚动)

　　</div>

　　<asp:HyperLink ID="backToTopLink" runat="server" CssClass="backToTop">回顶部</asp:HyperLink>

　　</div>

　　</form>

　　2.给回顶部控件添加样式：

　　

复制代码 代码如下:

　　<style type="text/css">

　　.backToTop

　　{

　　background-color: Yellow;

　　width: 30px;

　　border-style: outset;

　　border-width: 1px;

　　text-align: center;

　　font-weight: bold;

　　font-family: Arial;

　　font-size: x-large;

　　cursor: pointer;

　　position:absolute; // 注意要设置为绝对位置

　　right: 100px;

　　}

　　</style>

　　3.添加实现置顶效果脚本代码：

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　$(document).ready(function () {

　　$("#backToTopLink").attr("title", "回顶部");

　　$("#backToTopLink").attr("href", "#Top"); // 通过链接实现置顶

　　$(window).scroll(function () {

　　if ($(window).scrollTop() <= 100) {

　　$("#backToTopLink").fadeOut(200);

　　}

　　else {

　　$("#backToTopLink").fadeIn(400);

　　}

　　var v_Top = $(window).height() - $(".backToTop").height() - 10 + $(window).scrollTop(); // 动态计算滚动后置顶按钮top位置

　　$(".backToTop").css("top", v_Top + "px");

　　});

　　});

　　</script>

　　注意，本代码只是为了演示hyperlink控件来实现返回顶部的效果。还可以通过jQuery的动画效果，实现平滑置顶。

　　平滑过渡返回顶部代码如下：

　　$('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 替换$("#backToTopLink").attr("href", "#Top");即可

教程首页 更多教程