在这里，我有一些相关内容的div。
我想将滚动位置调整到最接近的div
示例网站
演示小提琴
如何使用 jQuery 执行此操作
杰奎里
$(".item").scroll( function( ) {
$(".item").css({ top: $(this).scrollTop( ) });
});
谁能帮我，
提前谢谢。
你去吧。你必须做几件事。
- 滚动停止时收听
- 查找"下一个"容器 滚动
- 到其顶部值，而不触发"滚动结束检测"
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');
});
工作示例演示
试试这个
$(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);
});
我想知道你寻找这个..
查看演示
<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( ... );
我找到了您想要实现的解决方案。您可以在下一行上更改 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));
}
});
演示
以下方法将有助于调整 Div 滚动位置，以便在视口中查看选定的内部 Div。
j查询 ：
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);
});
}