Создание кнопки "Вверх" на сайте с использованием JQuery

Пару месяцев назад у меня на сайте появилась кнопка "Back To Top", которая появляется, когда ты прокрутишь страницу немного вниз. При нажатии на эту кнопку сайт вернет тебя в самый верх страницы. Это очень удобно при просмотре больших объемов информации. Делается такая кнопка очень легко с использованием JQuery и CSS.

Для начала создайте у себя на сайте DIV-контейнер с ID=backToTopPanel. Можно назвать и как-то иначе, но в этом случае нужно будет изменить ID в CSS-стилях и JQuery-скрипте.

  1. <div id="backToTopPanel">^ Back to top</div>
* This source code was highlighted with Source Code Highlighter.

CSS для нашей кнопки.

  1. #backToTopPanel {
  2.     width:100px;
  3.     border:1px solid #ccc;
  4.     background:#f7f7f7;
  5.     text-align:center;
  6.     padding:5px;
  7.     position:fixed;
  8.     bottom:10px;
  9.     right:10px;
  10.     cursor:pointer;
  11.     display:none;
  12.     color:#333;
  13.     font-family:verdana;
  14.     font-size:11px;
  15. }
* This source code was highlighted with Source Code Highlighter.

Осталось добавить JQuery-скрипт, который будет определять, что пользователь прокрутил страницу вниз и показывать кнопку.

  1. <script type="text/javascript">
  2.     $(function() {
  3.         $(window).scroll(function() {
  4.             if($(this).scrollTop() != 0) {
  5.                 $('#backToTopPanel').fadeIn();
  6.             } else {
  7.                 $('#backToTopPanel').fadeOut();
  8.             }
  9.         });
  10.         $('#backToTopPanel').click(function() {
  11.             $('body,html').animate({scrollTop:0},800);
  12.         });
  13.     });
  14. </script>
* This source code was highlighted with Source Code Highlighter.

При клике на кнопку выполняется метод animate с параметром scrollTop:0 и скоростью перемещения 800. Больше информации о данном методе можно получить в документации по JQuery.

Для своего сайта я разработал ASP.NET компонент, который помещает весь необходимый код на страницу.

  1. namespace MasDen.Web.Controls
  2. {
  3.     #region Usings
  4.  
  5.     using System;
  6.     using System.Text;
  7.     using System.Web.UI.WebControls;
  8.  
  9.     #endregion
  10.  
  11.     /// <summary>
  12.     /// Represents panel for back to top page
  13.     /// </summary>
  14.     public class BackToTop : WebControl
  15.     {
  16.         #region Constants
  17.  
  18.         /// <summary>
  19.         /// The Html marking this control
  20.         /// </summary>
  21.         private const string HtmlMarkingControl = "<div id=\"{0}\">{1}</div>";
  22.  
  23.         /// <summary>
  24.         /// The key for Text property
  25.         /// </summary>
  26.         private const string TextPropertyKey = "text";
  27.  
  28.         /// <summary>
  29.         /// The default text for Text property
  30.         /// </summary>
  31.         private const string TextPropertyDefaultValue = "^ Back to top";
  32.  
  33.         #endregion
  34.  
  35.         #region Public properties
  36.  
  37.         /// <summary>
  38.         /// Gets or sets the text.
  39.         /// </summary>
  40.         /// <value>
  41.         /// The text.
  42.         /// </value>
  43.         public string Text
  44.         {
  45.             get
  46.             {
  47.                 object obj = ViewState[TextPropertyKey];
  48.  
  49.                 return obj == null ? TextPropertyDefaultValue : obj.ToString();
  50.             }
  51.  
  52.             set { ViewState[TextPropertyKey] = value; }
  53.         }
  54.  
  55.         #endregion
  56.  
  57.         #region Protected Implementation
  58.  
  59.         /// <summary>
  60.         /// Raises the <see cref="E:System.Web.UI.Control.PreRender"/> event.
  61.         /// </summary>
  62.         /// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>
  63.         protected override void OnPreRender(EventArgs e)
  64.         {
  65.             this.RegisterScripts();
  66.         }
  67.  
  68.         /// <summary>
  69.         /// Renders the control to the specified HTML writer.
  70.         /// </summary>
  71.         /// <param name="writer">The <see cref="T:System.Web.UI.HtmlTextWriter"/> object that receives the control content.</param>
  72.         protected override void Render(System.Web.UI.HtmlTextWriter writer)
  73.         {
  74.             writer.Write(string.Format(HtmlMarkingControl, this.ID, this.Text));
  75.         }
  76.  
  77.         #endregion
  78.  
  79.         #region Private Implementation
  80.  
  81.         /// <summary>
  82.         /// Registers the scripts.
  83.         /// </summary>
  84.         private void RegisterScripts()
  85.         {
  86.             StringBuilder script = new StringBuilder();
  87.  
  88.             script.AppendLine("<script type=\"text/javascript\">");
  89.             script.AppendLine("$(function() {");
  90.             script.AppendLine("$(window).scroll(function() {");
  91.             script.AppendLine("if($(this).scrollTop() != 0) {");
  92.             script.AppendLine("$('#" + this.ID + "').fadeIn();");
  93.             script.AppendLine("} else {");
  94.             script.AppendLine("$('#" + this.ID + "').fadeOut();");
  95.             script.AppendLine("}");
  96.             script.AppendLine("});");
  97.             script.AppendLine("$('#"+ this.ID + "').click(function() {");
  98.             script.AppendLine("$('body,html').animate({scrollTop:0},800);");
  99.             script.AppendLine("});");
  100.             script.AppendLine("});");
  101.             script.AppendLine("</script>");
  102.  
  103.             Page.ClientScript.RegisterStartupScript(this.GetType(), "backtotop-initial", script.ToString());
  104.         }
  105.  
  106.         #endregion
  107.     }
  108. }
* This source code was highlighted with Source Code Highlighter.

Как видите ничего сложного в данном элементе управления нет. Единственный недостаток, вернее недоработка, в том, что данный код не пишет нужные CSS-стили на страницу, но этот недостаток можно легко устранить.

Исходный код компонента

Комментарии

Оставить комментарий