10

Проискал некоторые исходники - не работали. Это надо сделать на jQuery. Скролинг вверх я знаю, вот мне надо вниз и до определенного элемента, лучше с демо, чтоб посмотреть.

Nicolas Chabanovsky
  • 51,426
  • 87
  • 267
  • 507
MaximPro
  • 3,913

2 Answers2

16

Создаете элемент до которого нужно скролить и запоминаете его 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>
wind
  • 3,081
  • Предоставьте демо посмотреть, где скорлится до определенного элемента, а то когда я этот код тестил, у меня ничего не скорлило. – MaximPro Jan 23 '12 at 14:39
  • Демо предоставить не могу - следуйте описанным мной шагам и за считанные секунды сделаете рабочее демо. У меня данный код работает во всех браузерах. Могу лишь привести полный код рабочей страницы, если вам нужно. – wind Jan 23 '12 at 14:45
  • давайте=... – MaximPro Jan 23 '12 at 14:47
  • 2
    Обновил ответ. Только в моем примере данный скрипт "вешается" на все ссылки на странице - вам нужно будет изменить селектор при переносе на реальный сайт. – wind Jan 23 '12 at 14:54
3

Допустим у тебя есть кнопка вверху экрана

<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 подбираешь сам.

AndrewLink
  • 31