Главная Блоги Блог админа

InstantCms Простое решение: Наверх страницы

Опубликовано:
Редактировалось: 1 раз — вчера в 19:53
Просмотров: 3664
+3↑
Голосов: 3

При создании больших страниц, появляется необходимость в кнопке "Наверх страницы" Есть разные способы. Вот один простой, но неоформленный, еще бы добавить тут ему оформления) Кто сможет прошу дополнить графически.

Итак открываем template.php и вверху в начале, после открытия body вставляем код:

<a name="Начало страницы"></a>

Дальше например перед началом футера, вставляем следующий код:

<a href="#Начало страницы">Наверх страницы</a>

Вот и все. Но таки, надо прикрутить оформление)

Спасибо KozaNostra c оформлением графически. Итак чтобы кнопка имела шрифт 18 и была посередине вставляем второй код вот таким видом. <center><a style="font-size:18px;" href="#Начало страницы">Наверх страницы</a></center>

Можно вставлять тут уже куда фантазия пожскажет, я вставил в просмотр комментов. и внизу.
Теги: решение, наверх страницы, instantcms
Комментарии (6)
Кирилл Трубецкой #
: +2
Стрелка "Наверх"


Код PHP:
  1. <style type="text/css">
  2. .scroll-to-top-button{
  3. background: #1F3147 url(../images/upload.png) center center no-repeat;
  4. width: 32px;
  5. height: 32px;
  6. border-radius: 5px;
  7. -moz-border-radius: 5px;
  8. -webkit-border-radius: 5px;
  9. -o-border-radius: 5px;
  10. cursor: pointer;
  11. padding: 15px;
  12. margin: 20px;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. (function(jq) {
  17. jq.autoScroll = function(ops) {
  18. ops = ops || {};
  19. ops.styleClass = ops.styleClass || 'scroll-to-top-button';
  20. var t = jq('<div class="'+ops.styleClass+'"></div>'),
  21.             d = jq(ops.target || document);
  22. jq(ops.container || 'body').append(t);
  23.  
  24. t.css({
  25. opacity: 0,
  26. position: 'absolute',
  27. top: 0,
  28. right: 0
  29. }).click(function() {
  30. jq('html,body').animate({
  31. scrollTop: 0
  32. }, ops.scrollDuration || 1000);
  33. });
  34.  
  35. d.scroll(function() {
  36. var sv = d.scrollTop();
  37. if (sv < 10) {
  38. t.clearQueue().fadeOut(ops.hideDuration || 500);
  39. return;
  40. }
  41.  
  42. t.css('display', '').clearQueue().animate({
  43. top: sv,
  44. opacity: 0.8
  45. }, ops.showDuration || 500);
  46. });
  47. };
  48. })(jQuery);
  49. </script>
  50. <div style="opacity: 0.8; position: absolute; top: 456px; right: 0px; display: none" class="scroll-to-top-button"></div>
  51. <script type="text/javascript">
  52. $(document).ready(function() {
  53.      $.autoScroll({
  54. scrollDuration: 2000,
  55. showDuration: 600,
  56. hideDuration: 300
  57. });
  58.     });
  59. </script>
Сама стрелка:
http://www.cmsinstant.ru/users/files/download15.html
Ответить
Letsgo #
: 0
этот способ тоже есть, но он вызывает конфликты.
Ответить
Кирилл Трубецкой #
: 0
В коде был старенький jquery
Код PHP:
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
я убрал и все нормально...
Ответить
Кирилл Трубецкой #
: +1
Да и просто в виде ссылки как то не красиво...
Если бы сделать вместо, допустим, "стрелки" кнопку "Наверх"... Удобно и красиво...
Ответить
Кирилл Трубецкой #
: 0
Кнопка "Наверх"

Код PHP:
  1. <style type="text/css">
  2. .scroll-to-top-button{
  3. background: #807d71 url(../images/upload1.png) center center no-repeat;
  4. width: 32px;
  5. height: 16px;
  6. border-radius: 5px;
  7. -moz-border-radius: 5px;
  8. -webkit-border-radius: 5px;
  9. -o-border-radius: 10px;
  10. cursor: pointer;
  11. padding: 15px;
  12. margin: 5px;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. (function(jq) {
  17. jq.autoScroll = function(ops) {
  18. ops = ops || {};
  19. ops.styleClass = ops.styleClass || 'scroll-to-top-button';
  20. var t = jq('<div class="'+ops.styleClass+'"></div>'),
  21.             d = jq(ops.target || document);
  22. jq(ops.container || 'body').append(t);
  23.  
  24. t.css({
  25. opacity: 0,
  26. position: 'absolute',
  27. top: 0,
  28. right: 0
  29. }).click(function() {
  30. jq('html,body').animate({
  31. scrollTop: 0
  32. }, ops.scrollDuration || 1000);
  33. });
  34.  
  35. d.scroll(function() {
  36. var sv = d.scrollTop();
  37. if (sv < 10) {
  38. t.clearQueue().fadeOut(ops.hideDuration || 500);
  39. return;
  40. }
  41.  
  42. t.css('display', '').clearQueue().animate({
  43. top: sv,
  44. opacity: 0.8
  45. }, ops.showDuration || 500);
  46. });
  47. };
  48. })(jQuery);
  49. </script>
  50. <div style="opacity: 0.8; position: absolute; top: 456px; right: 0px; display: none" class="scroll-to-top-button"></div>
  51. <script type="text/javascript">
  52. $(document).ready(function() {
  53.      $.autoScroll({
  54. scrollDuration: 2000,
  55. showDuration: 600,
  56. hideDuration: 300
  57. });
  58.     });
  59. </script>
Сама кнопка "наверх" закинуть /images/upload1.png:
http://www.cmsinstant.ru/users/files/download16.html
Ответить
Letsgo #
: 0
через модуль источник вариант?
Ответить
Добавить комментарий RSS-лента комментариев

Голосуем

Самый нужный компонент