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

最新推荐文章于 2025-11-26 15:12:28 发布

最新推荐文章于 2025-11-26 15:12:28 发布 · 116 阅读

文章标签：

#xhtml #c# #javascript #ViewUI

本文介绍如何使用jQuery实现在页面滚动时显示并控制返回顶部按钮的可见性，通过监听滚动事件来动态调整该按钮的显示状态，提供用户方便的页面跳转体验。

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