Мне нужна кнопка, которая будет прокручивать 400 пикселей вниз при каждом нажатии - PullRequest
Новая
       28

Мне нужна кнопка, которая будет прокручивать 400 пикселей вниз при каждом нажатии

2 голосов
/ 21 февраля 2012

У меня есть изображение, которое я буду использовать в качестве кнопки.Мне нужен код, который заставит страницу плавно прокручиваться вниз на 400 пикселей при каждом нажатии на изображение.

Я думаю, что JQuery или Javascript помогут, но я не совсем уверен, потому что не знаю их.

На самом деле было бы еще лучше, если бы вместо кнопки я мог просто использовать сочетание клавиш.Как и в Google в Google+, «J» и «K» используются для перемещения вверх и вниз по сообщениям.Это именно то, чего я пытаюсь достичь.Каждый пост на моем сайте будет иметь одинаковую высоту, чтобы его было проще кодировать.

1 Ответ

2 голосов
/ 21 февраля 2012

Просто привяжите функцию animate к событию click вашего изображения или кнопки и дайте ему анимировать свойство scrollTop с 400.

Например, поместите эту кнопку на страницу: 

<input type="button" value="Scroll" id="scroll" />

И используйте этот фрагмент JavaScript: 

$('#scroll').click(function() {
    $('body').animate({scrollTop: +400}, 1000);
})

Просто убедитесь, что jQuery загружен и он будет работать.

Загрузите jQuery, добавив его непосредственно перед конечным тегом body: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

И лучший способ включить фрагмент JavaScript - поместить следующее между приведенным выше правилом сценария и тегом body body. 

<script type="text/javascript">
$(document).ready(function() {
    $('#scroll').click(function() {
        $('body').animate({scrollTop: +400}, 1000);
    })
});
</script>
...