анимация прокрутки с переполнением текста - PullRequest
Новая
       6

анимация прокрутки с переполнением текста

1 голос
/ 17 ноября 2011

Привет У меня возникли некоторые проблемы с получением некоторых элементов div для прокрутки в представлении из автоматического переполнения в отдельном элементе div к ссылкам индексации (вероятно, это не очень хорошо объяснено!) В идеале я хотел бы, чтобы это плавно анимировалось

Я попробовал несколько методов, используя смещение и положение, однако они казались ошибочными, я подумал, как лучше всего это сделать, я использую jquery, если это помогает

пример кода:

http://jsbin.com/ifefix/11/edit#javascript,html,live

1 Ответ

2 голосов
/ 17 ноября 2011

Ссылка на рабочий раствор: http://jsfiddle.net/pioul/N5bWm/2/

Вот резюме:

HTML: 

<div id="wrapper">
    <ul>
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
    </ul>
    <div id="container">
        <div id="one">1</div>
        <div id="two">2</div>
        <div id="three">3</div>
    </div>
</div>

JQuery: 

// bind an action to the click event on your links
$("ul > li > a").bind("click", function(e){
    e.preventDefault();

    // get the "block" offset from the top of the #container div (and add to it the actual scroll of the div)
    var scrollto = $($(this).attr("href")).position().top + $("#container").scrollTop();

    // stop previous non-ended animations, and scroll smoothly to the new "block"
    $("#container").stop(true).animate({ scrollTop: scrollto }, 1000);
});

CSS:

Единственное свойство, которое имеет значение, это position: relative для #container, чтобы получить точные значения из $().position().

...