четверг, 10 января 2013 г.

Как сделать стрелочку для быстрой прокрутки на верх страницы?



Я не считаю себя гуру в компьютерах. Более того, очень часто сталкиваюсь с проблемами, которые многим покажутся смешными. Именно поэтому решила собирать в папочку "рецепты" для улучшения блога, написанные простейшим языком, проще говоря для чайников как я. 

Недавно у одной интересной девушки Валери в блоге увидела справа стрелочку, которая быстро возвращает к началу поста. Удобно. Подбивала на мастер класс, но у Валери сейчас такая круговерть, что ей совсем не до стрелочек. Да и у меня самой дни насыщенные в реале, не до блога. 

И, когда я сама уже забыла об этом "лифте", как наткнулась на простейшую инструкцию что и как сделать.

Если обратите внимание на угол снизу справа, то заметите такую рыженькую очаровательную стрелочку, которая у меня появилась. Хотите подобную? Легко!

Выбираем стрелку и сохраните куда-нибудь ссылку на нее она вам еще пригодиться:

https://sites.google.com/site/poleznoznat/r1.png
https://sites.google.com/site/poleznoznat/r2.png
https://sites.google.com/site/poleznoznat/r3.png
https://sites.google.com/site/poleznoznat/r5.png
https://sites.google.com/site/poleznoznat/r6.png
https://sites.google.com/site/poleznoznat/r1.png
https://sites.google.com/site/poleznoznat/r7.png
https://sites.google.com/site/poleznoznat/r1.png
https://sites.google.com/site/poleznoznat/r8.png
https://sites.google.com/site/poleznoznat/r9.png
https://sites.google.com/site/poleznoznat/r10.png
https://sites.google.com/site/poleznoznat/r11.png
https://sites.google.com/site/poleznoznat/r12.png

Далее создаем новый гаджет Дизайн - Элементы страницы - Добавить гаджет HTML/JavaScript, и вставляем туда код и скрипт что ниже:
<script type="text/javascript" >
var smoothJumpUp = function() {
if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
window.scrollBy(0,-50);
setTimeout(smoothJumpUp, 20);
}
}
</script>
<div id="topcontrol" style="position: fixed; z-index: 100500; bottom: 5px; right: 5px; cursor: pointer; opacity: 1; " title="К началу страницы">
<a href="javascript:smoothJumpUp()">
<img src="тут ваша ссылка"/> 
</a> 
</div>
<a href="http://dperexvatov.blogspot.com/"><img src="https://sites.google.com/site/poleznoznat/gra.png"/></a>

Затем надо заменить поле "тут ваша ссылка" на ссылку что вы скопировали в самом начале. Жмем сохранить, видим стрелку на сайте нажимаем плавно переходим в начало и радуемся.

На авторство не претендую. Информация, за которую я очень благодарна, скопирована отсюда

Если Вас заинтересовала тема, то дайте знать. Я быстренько подберу еще материал


77 комментариев:

  1. Стрелочка, ура! я у всех видела, но не знала где взять) А еще есть разные курсорчики в блогах, тоже красиво)

    ОтветитьУдалить
    Ответы
    1. Если нужны курсорчики, то в ближайшее время выложу пост на эту тему. Еще смайлики в сообщениях ждут своей очереди. На данный момент мне нужно перенести посты по блоговедению из первого блога в этот.

      Удалить
  2. спасибо большое, теперь и у меня стрелочка появилась!!!

    ОтветитьУдалить
    Ответы
    1. Замечательно! Очень удобная штучка. Я настолько к ней привыкла, что в других блогах ее очень не хватает.

      Удалить
  3. А у меня, к сожалению, не отоброжается рисунок(

    ОтветитьУдалить
    Ответы
    1. Алена, попробуй другой вариант стрелочки.

      Удалить
  4. Энн, спасибо за этот полезный пост! Ну, ты (можно так?) сама заходила и обо все догадалась)) А можно ли такой вариант стрелочки, чтоб, нажав на нее, сразу поднималась страница к верху, без прокрутки?

    ОтветитьУдалить
    Ответы
    1. Наверняка есть,но мне пока не попалась. Если будет, напишу. Не отписывайся пока от комментариев к этому посту.

      Удалить
    2. Хорошо!!! Правда, только подписалась)))

      Удалить
    3. Скорость скроллинга страницы регулируется в самом скрипте.
      "setTimeout(smoothJumpUp, 20);"
      цифра 20 - скорость прокрутки вверх.

      Удалить
    4. Владислав, спасибо за уточнение! Иногда, когда в постах по полсотни фото, хочется, чтобы перематывалось быстрее, но все равно это зависит от авторов блогов. Некоторых и от этих 20 подташнивает. Или если поставить 100, то будет почти мгновенно?

      Удалить
  5. Я тут случайно обнаружила, что у моей стрелочки текст во всплывающей подсказке отображается какими-то кракозябристыми значками) В итоге я сразу помчалась к тебе делать новую стрелочку. Правда, картинку я поставила свою и сразу не скажешь, зачем она там, но если навести курсор, то всё сразу становится понятно))
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Пандочка твоя просто супер в качестве стрелочки!

      Удалить
  6. Спасибо, установила себе! Не знала раньше про такую вещь!

    ОтветитьУдалить
  7. ЭНН, СПАСИБО!!!!
    Теперь и у меня поселилась такая стрелочка)))

    ОтветитьУдалить
  8. Энн, Поздравляю тебя с прошедшим Днем варенья!!!! Здоровья, успехов, любви и 48 часов в сутки))) Стрелочка получилась!!! Благодаря тебе потихоньку разбираюсь со своим блогом... Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Диана, я рада, что благодаря моим статьям, читателям стали больше нравиться свои же блоги.

      Спасибо за поздравления с днем рождения и искренние пожелания!

      Удалить
  9. Наташа, поставила стрелку! Теперь радуюсь ))) Спасибо!

    ОтветитьУдалить
    Ответы
    1. Я тоже всегда радуюсь, когда у моих читателей все получается))

      Удалить
  10. какая полезность!!!
    спасибо!!!
    получилось ))

    ОтветитьУдалить
    Ответы
    1. Здорово! Ирина, тебе теперь хочется дальше вести свой блог?

      Удалить
  11. И у меня теперь есть такая стрелочка. Спасибо, Энн!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Оксаночка! У меня с этой стрелочки блог начался ))

      Удалить
  12. Энн! Ура! У меня появилась чудо - стрелочка! я повторюсь, ноя полный чайник в этих делах - но Вы все доступно даете! СПАСИБО БОЛЬШОЕ!!!

    ОтветитьУдалить
    Ответы
    1. Большое спасибо за ваши эмоции!!! Мне тоже очень важно, чтобы у вас все получалось))

      Удалить
  13. Ого, как классно! Давно хотела узнать как это делается! Спасибо)))

    ОтветитьУдалить
    Ответы
    1. Уу, осмелитесь, так вместо предложенных стрелочек свою картинку вставите)))

      Удалить
  14. Энн, мне интересно все из этой темы, пожалуйста, сообщайте о новостях: reginasvetlova@yandex.ru
    Вашу стрелочку уже вставила, она мне пришлась кстати!

    ОтветитьУдалить
    Ответы
    1. Регина Светлова, я рада, что информация оказалась полезной, но я не могу посылать вручную сообщения о новостях. Для получения анонсов достаточно подписаться либо на блог (что Вы уже сделали. Анонсы будут отображаться в ленте чтения), либо возможно подписаться по e-mail (справа в боковой колонке достаточно ввести адрес своей почты и нажать submit)

      Удалить
  15. Ура! и у меня стрелочка! Спасибо огромное за доступную информацию!

    ОтветитьУдалить
    Ответы
    1. Галка, знаете как я рада, что мои инструкции востребованы и приносят радость кому-то!!!

      Удалить
  16. Ну теперь вообще НИШТЯК!!! Энн - ТЫ золото!

    ОтветитьУдалить
    Ответы
    1. Сергей Вигуляр, спасибо за комплимент! Приятно)))) Я тоже одним глазком к тебе заглянула))))

      Удалить
  17. Спасибо, теперь и я со стрелкой))

    ОтветитьУдалить
    Ответы
    1. Ирина Степаненко, здорово, что все у Вас получилось!

      Удалить
  18. Спасибо, у меня все получилось!!!

    ОтветитьУдалить
    Ответы
    1. Юлия Михайлова, поздравляю со стрелочкой!

      Удалить
  19. Как удачно я сегодня зашла в один блог - увидела вашу ссылку! Спасибо, активным блоговедом я стала чуть больше месяца назад, а хочется, чтобы все было красиво и удобно не только мне, но и читателям. До чего-то дошла сама, но времени осваивать все методом тыка не хватает. Буду наведываться к вам :-)

    ОтветитьУдалить
    Ответы
    1. Galina (MarLen Mom), наведывайтесь, буду только рада!
      Простите, что не ответила сразу.

      Удалить
  20. Спасибо за статью. Но у меня проблемка выскочила... Я решила другую картинку вместо стрелочки вставить, а у меня почему-то и стрелочка и картинка вместе вставились. Теперь не знаю что делать(((

    ОтветитьУдалить
  21. От! Теперь у меня есть тоже стрелочка. Спасибо вам! :)

    ОтветитьУдалить
  22. Благодарю от всей души. Просто и легко. Хотя до этого перепробовала различные способы. А Ваш - самый классный!

    ОтветитьУдалить
  23. Спасибо БОЛЬШОЕ, установила себе! Ура-Ура!!!!

    ОтветитьУдалить
  24. Спасибо! Обожаю фиолетовый цвет и стрелочка теперь у меня любимого цвета!

    ОтветитьУдалить
  25. Спасибо, вы большая молодец. Для меня весь ваш блог источник полезной информации. Еще раз большое вам спасибо.

    ОтветитьУдалить
  26. Большое спасибо!! Поставила и себе стрелочку)

    ОтветитьУдалить
  27. Большое спасибо, стрелочка - чудо!

    ОтветитьУдалить
  28. Хотелось бы возле комментария видеть лицо, а не "кирпич"...

    ОтветитьУдалить
  29. Спасибо. Все просто и понятно!

    ОтветитьУдалить
  30. Энн!А у меня на все изменения в дизайне появляется надпись,что изображение нельзя передать с помощью защищенного соединения!Это что,не разрешает мой антивирус?Мне надо что-то отключать?

    ОтветитьУдалить
    Ответы
    1. Светлана, я, к сожалению, не в курсе, так как с таким не сталкивалась

      Удалить
  31. Ответы
    1. Создателю сайтов нечего делать в любительском блоге

      Удалить
  32. О!!!Энн!Я эту кнопку добила всё-таки!Тяжко быть "чайником"Но "стучите и вам откроется"!!!!)))))Спасибо за всё!!!!

    ОтветитьУдалить
  33. Ну, красота!!!!Спасибо за блог!!Теперь у меня голубая водная стрелочка!!!!

    ОтветитьУдалить
  34. Спасибо,очень полезный материал.

    ОтветитьУдалить
  35. Респект автору! Спасибо за полезную инфу...

    ОтветитьУдалить
  36. Энн, спасибо! Стрелочка - очень нужная вещь! Тоже хотелось такую :) Теперь есть!
    На всякий случай, чем меньше число в "setTimeout(smoothJumpUp, 20);", тем быстрее движется страница.

    ОтветитьУдалить

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...