Как сделать кнопку наверх без прокрутки?

Question

[Костя]

Вопрос довольно прост: Как сделать кнопку наверх без плавной прокрутки ? То есть, чтобы страница при нажатии просто перемещалась наверх.
Я понимаю что можно сделать так:

<a href="#top" title="Вернуться к началу" class="top">Наверх</a></div>

Но тогда поле нажатия в конец url страницы добавиться #top. как сделаь, что бы url оставался прежним ?

Comments

[Костя]

Обратите внимание как работает кнопка на toster.ru Нужно сделать так же, но без единственной детали: кнопка не должна появляться, она будет видна всегда.

Answer 1

[kompi]

"Господи, нагородили":
window.scroll(0,0);
Для ленивых:
<span onclick="window.scroll(0,0);">^^^^</span>

Comments

[nowm]

Зачётно. И никакой jQuery не нужен. ))

Answer 2

[nowm]

По-моему вот такая конструкция будет нормально везде работать:

<a onclick="$(document).scrollTop(0);">Наверх</a>

На тач-устройстве, во всяком случае нормально работает — не только на компьютере с мышью. Никакой анимации. Реализовано с помощью jQuery, так как у вас в тегах это упоминается.

Или, если нужна именно кнопка:

<button type="button" onclick="$(document).scrollTop(0);">Наверх</button>

И вообще можно практически любой элемент так использовать.

При использовании тега < A > с атрибутом href, нужно добавить в onclick инструкцию return false, чтобы переход по ссылке не происходил:

<a href="#" onclick="$(document).scrollTop(0);return false;">Наверх</a>

Если href не используется, то return false не обязательно указывать.

Comments

[Костя]

Спаибо работает, а прочему при наведении не видно, что это ссылка, внизу окна браузера ? К стати а как на Тостере это сделано ?

[nowm]

@kapnod потому что href нет. Обычно в брузере встроенные стили срабатываю, когда есть href. Если нужно чтобы при наведении вид менялся, добавьте класс какой-нибудь к этому элементу, а в стили добавьте селектор .название-класса:hover и опишите, как всё это должно выглядеть при наведении.

[nowm]

Либо так:

<a href="#" onclick="$(document).scrollTop(0);return false;">Наверх</a>

Сорри, то, как это сделано на тостере, я не буду искать. Я готов ответить на вопрос, как можно сделать кнопку наверх без прокрутки, но не готов тратить время на отладку JS Тостера в поисках того, как это сделано у них. У меня столько свободного времени нет.

[Костя]

@Xu4 последний код четко работает.

[nowm]

@kapnod я его просто, перед тем как публиковать, протестил ещё на паре устройств и в нескольких браузерах. Логично, что он работает. :)

Answer 3

[kudlayko]

html

<a style='position: fixed; bottom: 25px; right: 1px; cursor:pointer; display:none;' href='#' id='Go_Top'>
 Вверх
</a>

jQuery

$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});

$(function() {
 $("#Go_Top").scrollToTop();
});

Comments

[Костя]

Мне нужно без планой прокрутки ! Грубо говоря как на toster.ru

Answer 4

[iamDimka]

<span title="Вернуться к началу" class="top" onclick="(document.documentElement.scrollTop ? document.documentElement : document.body).scrollTop = 0;">Наверх</span>

но, еще лучше вынести в js файл

Answer 5

[Иван Сомов]

api.jquery.com/animate
или в чем-то подвох?

Answer 6

[Юрий Лобанов]

Господи, нагородили
<a class="top" href="#">Наверх</a>

$('.top').click(function(e){
 e.preventDefault();
});

Ссылка на # всегда возвращает наверх страницы, и не нужно якорей, а скрипт просто отменяет переход по ссылке, чтобы все как Вы просили. Можно и по вашему, отправлять на #top, а скрипт отменит переход по url'у.

Comments

[Костя]

Как срипт вставить

<script type="text/javascript">$('.topp).click(function(e){
 e.preventDefault();
});
</script>

не работает.

[Юрий Лобанов]

У Вас ковычка упущена в названии класса, и почему класс с двумя p? Скопируйте у меня скрипт. И не забудьте вставлять его после jquery

[Костя]

Все сделал как написали. Теперь когда нажимаешь вообще не чего не происходит.

[Юрий Лобанов]

@kapnod jsfiddle.net/iiil/U5PES
Все работает, прокрутите зеленый блок и нажмите на ссылку

Answer 7

[Николай Васильчук]

На тостере используется плагин $.scrollTo без анимации

Answer 8

[Костя]

Спасибо всем за разнообразие вариантов =) Какой все же предпочтительней бедт выбрать с точки зрения кроссплатформенности ?