仿新浪微博“返回顶部”效果

fmms 12年前 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                        <html xmlns="http://www.w3.org/1999/xhtml">                <head runat="server">                    <title></title>                    <style type="text/css">                    #content                    {                        height:2020px; border:1px solid red; width:100%;                         }                    #goback{ position:fixed;top:450px;left:1250px; display:none}                    a{ text-decoration:none;}                    #HyperLink1{ margin-left:5px; margin-top:10px;}                    </style>                    <script src="Jquery1.7.js" type="text/javascript"></script>                    <script type="text/javascript">                        $(function () {                            $(window).scroll(function () {                                var s = $(window).scrollTop(); //获取窗口的滚动条的垂直位置                                //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐                                if (s >= 90) {                                    $("#goback").fadeIn(200);                 //css("display", "block");                                                                }                                else {                                    $("#goback").fadeOut(200);               //css("display", "none");                                                              }                            });                        })                    </script>                </head>                <body>                    <form id="form1" runat="server">                    <div id="content">                    <a name="1"></a>                    <p>返回到这里</p>                    <div id="goback" style="width: 28px; height: 96px; ">                        <asp:HyperLink ID="HyperLink1" runat="server" Height="66px" NavigateUrl="#1"                             Width="28px">返回顶部</asp:HyperLink>                    </div>                    </div>                    </form>                                    </body>                </html>