Question

这里我有一堆div与一些相关的内容。

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

我如何使用jQuery

执行此操作

JQuery的

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

任何人都可以帮助我，

先谢谢。

Answer 1

你走了。你必须要做几件事。

滚动停止时收听
找到“ next ”容器
滚动到其最高值，而不会触发“滚动结束检测”

<强>的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's answer到jQuery scroll() detect when user stops scrolling。此示例中的所有时间都可以根据您的需要进行调整。

<强>演示

Try before buy

Answer 2

试试这个：

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

您的更新小提琴：here

<强>更新
如果你想以平稳的方式做到这一点，试试这个：

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

工作样本 DEMO

试试这个

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

我想找你......

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

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

DEMO

Answer 7

以下方法将有助于调整Div滚动位置，以便在视口中可以看到所选的内部Div。

jQuery：

public class MainActivity extends Activity implements View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

     Button btnClickMe = (Button) findViewById(R.id.button3);
    btnClickMe.setOnClickListener(MainActivity.this);
}

@Override
public void onClick(View v) {

    EditText e1 = (EditText) findViewById(R.id.editText);
    EditText e2 = (EditText) findViewById(R.id.editText2);
    String Message = e1.getText().toString();
    String Key = e2.getText().toString();
    int MessageLength = Message.length();
    int KeyLength = Key.length();

    int[] ArrKeyValues = new int[MessageLength];
    int i;

    for ( i=0; i<KeyLength; i++){
        char KeyChar = Key.charAt(i);
        int KeyCharValue = (int)KeyChar;
        ArrKeyValues[i] = KeyCharValue;
    }
    int[] ArrMessageValues = new int[MessageLength];


    for(i=0; i< MessageLength; i++){
        char MessageChar = Message.charAt(i);
        int MessageCharValue = (int)MessageChar;
        ArrMessageValues[i] = MessageCharValue;
    }
    char[] CryptedMessage = new char[MessageLength];
    int[] FinalArray = new int[MessageLength];
    String txtr = "";
    for (i=0; i<MessageLength; i++){
        while (ArrKeyValues[i]==0){
            ArrKeyValues[i]=ArrKeyValues[i-KeyLength];
        }
        FinalArray[i] = -ArrKeyValues[i]+ArrMessageValues[i]+127;

        CryptedMessage[i]= (char)FinalArray[i];
        txtr+ = CryptedMessage[i];
    }
       TextView t1 = (TextView)findViewById(R.id.textView2);
       t1.setText(txtr);
   }
}

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

将滚动位置调整为最近的div

8 个答案:

工作样本 DEMO