Отрегулируйте положение прокрутки до ближайшего div

Здесь у меня есть куча div с некоторым содержанием.

Я хочу настроить положение прокрутки до ближайшего значения

Пример сайта

Демо Фиддл

Как я могу сделать это с помощью jQuery

JQuery

$(".item").scroll( function( ) {
    $(".item").css({ top: $(this).scrollTop( ) });
});

Кто-нибудь может мне помочь,

Заранее спасибо.

Источник

7 ответов

Решение

Ну вот. Вы должны сделать пару вещей.

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

JavaScript

var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {
            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
                    setTimeout(function() { animating = false; }, 300);
                    return false;
                }
            });
        }, 200));
    }
});

"Обнаружение конца прокрутки" происходит от yckart на jQuery scroll(), определяющего, когда пользователь прекращает прокрутку. Все сроки из этого примера могут быть адаптированы к вашим потребностям.

демонстрация

Попробуй перед покупкой

Источник

Попробуй это:

window.location.hash = 'your div id';

Ваша обновленная скрипка: здесь

ОБНОВИТЬ
если вы хотите сделать это плавно, попробуйте это:

$(window).scroll(function() {
    var winScroll = $(this).scrollTop(); // current scroll of window

    // find cloest div
    var cloest = $('your main divs').first(); // first section
    var min = 10000;
    $('your main divs').each(function() {
        var divTopSpace = $(this).offset().top - winScroll;
        if( divTopSpave < min && divTopSpave > 0 ) {
            cloest = $(this);
            min = divTopSpace;
        } 
    });

    // animate
    $(document.body).animate({scrollTop: cloest.offset().top}, 'slow');
});
Источник

Следующий метод поможет отрегулировать положение прокрутки Div, чтобы выбранный внутренний Div можно было просматривать в окне просмотра.

JQuery:

function adjScrollPosition(container, elem) {
var h = container[0].clientHeight;
var w = container[0].clientWidth;
var t = container.scrollTop();
var l = container.scrollLeft();
var b = t + h;
var r = l + w;
elem = elem[0];
var eh = elem.offsetHeight;
var ew = elem.offsetWidth;
var et = elem.offsetTop;
var el = elem.offsetLeft;
var eb = et + eh;
var er = el + ew;
var top = et < t || eh > h ? et : b < eb ? t + (eb - b) : t;
var left = el < l || ew > w ? el : r < er ? l + (er - r) : l;
// If you want to bring element in center of the view port uncomment following lines
//var top = et - (h / 2) + eh;
//var left = el - (w / 2) + ew / 2;

$(container).stop().animate({ scrollTop: top, scrollLeft: left }, 500);
}
Источник 
                if ($(".text-danger").length) {

                    $(document).ready(function () {
                        $('html, body').animate({
                            scrollTop: $("form#partner-register-form div.text-danger").first().offset().top - 60
                        }, 1000);
                    });
                }
Источник

Рабочий Образец ДЕМО

Попробуй это

$(document).ready(function () {
    var full_url = this.href,

        target_offset = $('.item:first').offset(),
        target_top = target_offset.top;

    $('html, body').animate({
        scrollTop: target_top
    }, 500);
});
Источник

Я нашел решение для того, чего ты хочешь достичь. Вы можете изменить 200 в следующей строке, чтобы высота от и до верхней части окна изменялась.

if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 )

полный код

var items = $(".thebox");
var animating = false;
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        if (!animating) {
            $.data(this, 'scrollTimer', setTimeout(function() {
                items.each(function(key, value) {
                    if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 ) {
                        animating = true;
                        $('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
                        setTimeout(function() { animating = false; }, 300);
                        return false;
                    }
                });
            }, 200));
        }
    });

DEMO

Источник

Я думаю, что вы ищете это..

проверить демо

<div class="item" id="123">(123 div Here )pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.</div>

<div style="width:20%;float:right;position:fixed;right:0px;">
   <ul>
       <li><a href="#123">123</a></li>
       <li><a href="#456">456</a></li>
       <li><a href="#789">789</a></li>
    </ul>
</div>
Источник

Чтобы заставить его работать в Firefox, используйте

$('body,html').animate( ... );
Источник
Другие вопросы по тегам