Проискал некоторые исходники - не работали. Это надо сделать на jQuery. Скролинг вверх я знаю, вот мне надо вниз и до определенного элемента, лучше с демо, чтоб посмотреть.
-
1http://demos.flesler.com/jquery/scrollTo/ - такое подойдет?– ling23 янв 2012 в 12:21
-
ассоциация: stackoverflow.com/questions/6677035– Nicolas Chabanovsky ♦26 фев 2017 в 15:11
-
@NicolasChabanovsky жаль что там не я задал этот вопрос, миллион просмотров...жесть =)– MaximPro26 фев 2017 в 15:15
-
Здорово, что все же задали здесь!– Nicolas Chabanovsky ♦26 фев 2017 в 17:03
-
@NicolasChabanovsky да, почти 3 десятка тысяч врать не будут.– MaximPro26 фев 2017 в 18:19
2 ответа
Создаете элемент до которого нужно скролить и запоминаете его id:
<div id="myDiv">content</div>
Далее создаете ссылку или кнопку с указанием id элемента куда скролить:
<a href="#myDiv">click me</a>
И собственно скрипт для скролинга:
$(document).ready(function () {
$("a").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
if ($.browser.safari) {
$('body').animate({ scrollTop: destination }, 1100); //1100 - скорость
} else {
$('html').animate({ scrollTop: destination }, 1100);
}
return false;
});
});
В данном скрипте работает прокрутка, как вверх, так и вниз.
UPD: добавлен полный пример страницы
<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
if ($.browser.safari) {
$('body').animate({ scrollTop: destination }, 1100); //1100 - скорость прокрутки
} else {
$('html').animate({ scrollTop: destination }, 1100);
}
return false;
});
});
</script>
</head>
<body>
<a href="#botDiv">scroll down</a>
<div id="topDiv">div</div>
CONTENT
<a href="#topDiv">scroll up</a>
<div id="botDiv">div</div>
</body>
</html>
-
Предоставьте демо посмотреть, где скорлится до определенного элемента, а то когда я этот код тестил, у меня ничего не скорлило.– MaximPro23 янв 2012 в 14:39
-
Демо предоставить не могу - следуйте описанным мной шагам и за считанные секунды сделаете рабочее демо. У меня данный код работает во всех браузерах. Могу лишь привести полный код рабочей страницы, если вам нужно.– wind23 янв 2012 в 14:45
-
-
2Обновил ответ. Только в моем примере данный скрипт "вешается" на все ссылки на странице - вам нужно будет изменить селектор при переносе на реальный сайт.– wind23 янв 2012 в 14:54
Допустим у тебя есть кнопка вверху экрана
<div class="email-button">
<a href="#" class="button" >
<i class="letter"></i>
</a>
</div>
Дальше тебе нужен JQuery
$(".button").click(function(){
$("html, body").animate({scrollTop: $("header").height()+ 7200 },"slow");
return false;});
В этом случае отбивка будет от моего header. Высоту в 7200 подбираешь сам.