javascript - 将滚动位置调整到最近的 div

Question

在这里，我有一堆带有一些相关内容的 div。

我想将滚动位置调整到最近的 div

示例网站

演示小提琴

我如何使用 jQuery 来做到这一点

jQuery

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

谁能帮帮我，

提前致谢。

Answer 1

干得好。你必须做几件事。

• 滚动停止时收听
• 找到“下一个”容器
• 滚动到其顶部值，而不触发“滚动结束检测”

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() 的回答，当用户停止滚动时检测。此示例中的所有时间都可以根据您的需要进行调整。

演示

先试后买

Answer 2

试试这个：

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');
});

Answer 3

工作样本演示

试试这个

$(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);
});

Answer 4

我觉得你找这个..

检查演示

<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>

Answer 5

要让它在 Firefox 中工作，请使用

$('body,html').animate( ... );

Answer 6

我找到了您想要实现的解决方案。您可以在下一行更改 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));
        }
    });

演示

Answer 7

以下方法将有助于调整 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);
}

Answer 8

                if ($(".text-danger").length) {

                    $(document).ready(function () {
                        $('html, body').animate({
                            scrollTop: $("form#partner-register-form div.text-danger").first().offset().top - 60
                        }, 1000);
                    });
                }