在这里，我有一堆带有一些相关内容的 div。
我想将滚动位置调整到最近的 div
我如何使用 jQuery 来做到这一点
jQuery
$(".item").scroll( function( ) {
$(".item").css({ top: $(this).scrollTop( ) });
});
谁能帮帮我，
提前致谢。
问问题
9751 次
8 回答
4
干得好。你必须做几件事。
- 滚动停止时收听
- 找到“下一个”容器
- 滚动到其顶部值，而不触发“滚动结束检测”
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() 的回答，当用户停止滚动时检测。此示例中的所有时间都可以根据您的需要进行调整。
演示
于 2013-09-25T12:15:47.457 回答
1
试试这个：
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');
});
于 2013-09-25T11:54:10.520 回答
0
工作样本演示
试试这个
$(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);
});
于 2013-09-25T12:02:33.090 回答
0
我觉得你找这个..
<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>
于 2013-09-25T12:06:32.047 回答
0
要让它在 Firefox 中工作，请使用
$('body,html').animate( ... );
于 2014-06-27T07:35:56.933 回答
0
我找到了您想要实现的解决方案。您可以在下一行更改 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));
}
});
于 2015-03-03T18:05:22.127 回答
0
以下方法将有助于调整 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);
}
于 2017-01-06T09:29:30.447 回答
0
if ($(".text-danger").length) {
$(document).ready(function () {
$('html, body').animate({
scrollTop: $("form#partner-register-form div.text-danger").first().offset().top - 60
}, 1000);
});
}
于 2020-07-17T13:51:48.317 回答