Как при нажатии на кнопку проскроллить страницу вниз на 500 пикселей?

Question

[Fredd Monty]

Как при нажатии на кнопку проскроллить страницу вниз на 500 пикселей?
Можно это сделать с помощью JS? Только не якорь, href уже занят.
Спасибо.

Answer 1

[Сергей delphinpro]

Как-то так

<a href="#" data-target="#el">...</a>

$('a').on('click', function(){
  var target = $(this).data('target');
  var pos = $(target).offset().top;
  $('html, body').animate({'scrollTop': pos - 100}, 400);
});

Comments

[Fredd Monty]

"#el" - как оно связано с JS? так не работает.

[Сергей delphinpro]

<a href="#" data-target="#el">...</a>
...
<div id="el">Блок, до которого надо скроллить</div>

<a href="#" data-target=".el">...</a>
...
<div class="el">Блок, до которого надо скроллить</div>

Answer 2

[GrimJack]

Ловите нажатие, в нем обрабатвыете
$("селектор").scrollTop(500);

.scrollTop .scrollLeft .position .offset

Comments

[Fredd Monty]

так не работает

$(".more-info-btn").click(function(event) {
$(".more-info").scrollTop(1000);
});

[Сергей delphinpro]

Stas Fedorko: окно нужно скроллить =)
$(window).scrollTop($(window).scrollTop() + 500);

[GrimJack]

Stas Fedorko: код/ссылку в студию, будем смотреть

[Сергей delphinpro]

Или плавно

var currentScrollTop = $(window).scrollTop();
$('html, body').animate({'scrollTop': currentScrollTop + 500}, 400);

[Fredd Monty]

Сергей: так работает, спасибо!

А если на кнопке href занят, можно этой кнопкой прокрутить страницу до нужного блока вниз, что бы 100 пикс от верха?
перепишите код в ответ я выберу.