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

<%@ 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>


 

你可能感兴趣的:(jquery,新浪微博,server,function,XHTML,Hyperlink)