четверг, 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>

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

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

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


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

  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. Уу, осмелитесь, так вместо предложенных стрелочек свою картинку вставите)))

    ОтветитьУдалить
  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...