scrollTo: получение изображений кнопок для scrollTo divs

Question

Я не нашел ответа, действительно специфического для моего случая, который, я думаю, является распространенным. Я хочу добавить эффект scrollTo на мою веб-страницу с помощью jquery (или javascript). Я до сих пор не знаю, какой самый простой способ, если не работать. (

У меня есть одна вертикальная страница. Навигация находится внизу каждой оболочки div. Я бы хотел, чтобы мои области кнопок прокручивались до элементов div. На данный момент я создал кнопки для ссылки на Div. Это прекрасно, за исключением того, что мне нужно добавить анимацию.

Вы можете посмотреть мою тестовую страницу здесь: мой сайт

Я пробовал scrollTo, но каждая из моих кнопок ссылается на определенный div. Не уверен, как изменить плагин, чтобы работать для меня.

Я думаю, что следующим лучшим решением является вставка JavaScript, который анимирует все ссылки в окне? Определенно не знаю, где найти этот код или как изменить его для моего случая.

Заранее всем спасибо, и я с нетерпением жду решения от того, что кажется очень ярким сообществом.

Answer 1

(Обратите внимание, из вашего примера в атрибуте title у вас есть javascript, а не щелчок мышью, не уверен, что это так)

Это не использует плагин, но вы могли бы сделать что-то столь же простое как следующее, используя jQuery:

function scrollTo (element) {
    var target = $(element).offset();
    $('body').animate({scrollTop: target.top}, 'slow');
}

Это позволяет вам просто указать селектор на то, что вы хотите прокрутить, так что это может быть так просто, как:

<div id="more">
    <a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
        <img src="images/more.png" border="0" />
    </a>
</div>

В моем быстром тестировании это сработало. (После того, как я исправил опечатку целевого элемента в вызове scrollTo)

Answer 2

Попробуйте что-то вроде этого ...

рабочий пример: http://jsfiddle.net/BTncy/

$(document).ready(function(){
  $('a').click(function(){
    var ele_href= $(this).attr('href');
    $('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
    return false;
  });
});