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

fmms 12年前發布 | 14K 次閱讀 JavaScript開發 JavaScript 

    <%@ 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>  </pre><br />
 本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！