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

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

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

Я использую анимированную функцию прокрутки до идентификатора, которая действительно хорошо работает для всей страницы, перемещаясь к различным элементам с определенными идентификаторами на странице. Однако я хотел бы иметь возможность ограничить прокрутку определенным div, который имеет высоту 450, ширину 910 и overflow-y: scroll set. 

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

и затем вставив ссылку: 

<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>

пример с этой страницы http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/comment-page-2/#comment-41618

Мне нравится, насколько это просто, и я надеялся, что это можно будет в основном поддерживать (очевидно, это будет более сложным, чем сейчас). Было бы замечательно, если бы он мог сохранить функцию прокрутки к элементу в любом месте на странице, но также иметь ссылку, которая делала бы div с переполнением, также прокручивая только. Заранее благодарим за любую помощь, которую сообщество может оказать мне.

Ответы [ 2 ]

3 голосов
/ 28 февраля 2012

Вы пробовали что-то подобное 

function specific_goToByScroll(parent_id, id){
    $("#"+parent_id).animate({scrollTop: $("#"+id).position().top}, 'slow');
}

Где parent_id - это ваш специальный div с переполнением, и вместо этого используйте .position(), потому что позиция относительно родительского элементаа не по отношению к странице.

0 голосов
/ 02 июля 2014

Ответ ShadowScripter близок и был отличной отправной точкой, но вы заметите, что если вы прокрутите до самой нижней позиции, запрос

$ ( "#" + идентификатор) .position (). Верх

возвращает отрицательное число для элементов, которые расположены над самым нижним элементом. Это связано с тем, что position (). Top возвращает значение относительно вершины родителя, а в переполненном div эта относительная верхняя позиция может быть меньше вершины вершины родителя.

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

Для моих целей было проще просто записать все вершины, когда страница закончит загрузку, а затем извлечь позицию из структуры данных: 

var anchors = ['target01', 'target02', 'target03'];
var positions = {};

window.onload = function() {

    for (var i = 0; i < anchors.length; i++) {
        var id = anchors[i];
        positions[id] = $("#" + id).position().top;
    }
};

function scrollInOverflowDiv(parentID, id) {

    var pos = positions[id];
    $("#" + parentID).animate({scrollTop: pos}, 'slow');
}
...