如何自动滚动到jQuery目标div？ [英] How to auto scroll to target div with jquery?

问题描述

如果我有以下结构：

 < div id =listofstuff> 
< div class =anitem> 
< span class =itemname> Item1< / span> 
< span class =itemdescruption> AboutItem1< / span> 
< / div> 
< div class =anitem> 
< span class =itemname> Item2< / span> 
< span class =itemdescruption> AboutItem2< / span> 
< / div> 
< div class =anitem> 
< span class =itemname> Item3< / span> 
< span class =itemdescruption> AboutItem3< / span> 
< / div> 
< / div> 
  

说我继续这个模式，直到item5 ...我想这样做，当页面加载时，它会搜索itemname为Item5的div，并滚动到它以便它可见。假设listofstuffdiv的大小很小，在任何给定时间只显示3个匿名项，但由于overflow：auto存在，用户可以滚动。

所以jQuery可以滚动到它找到的项目，所以它是可见的，用户不必向下滚动到item5;

解决方案

看到这个小提琴： http://jsfiddle.net/pixelass/uaewc/2/ p>

您不需要scrollTo插件。

  $（document）.ready（function（）{
 lastElementTop = $（'＃listofstuff .anitem：last-child'）。position（）。 top; 
 scrollAmount = lastElementTop  -  200; 
 
 $（'＃listofstuff'）。animate（{scrollTop：scrollAmount}，1000）; 
}）; 
  

CSS

  .anitem {
 height：100px; 
} 
 
 #listofstuff {
 
 height：300px; 
溢出：auto; 
 
 $ / code> 





---

更多的动作和变量 http://jsfiddle.net/pixelass/uaewc/5/

---

  $（document）.ready（function（）{
 var wrapper = $（'＃listofstuff'），
 element = wrapper.find（'。anitem'），
 lastElement = wrapper.find（'。anitem：last-child'）， 
 lastElementTop = lastElement.position（）。top，
 elementsHeight = element.outerHeight（），
 scrollAmount = lastElementTop  -  2 * elementsHeight; 
 
 $（' （）; 
}，1000，function（）{
 lastElement.addClass（'current-last'）; 
}）; 
}）; 
  

If I have a structure like:

<div id="listofstuff">
<div class="anitem">
   <span class="itemname">Item1</span>
   <span class="itemdescruption">AboutItem1</span>
</div>
<div class="anitem">
   <span class="itemname">Item2</span>
   <span class="itemdescruption">AboutItem2</span>
</div>
<div class="anitem">
   <span class="itemname">Item3</span>
   <span class="itemdescruption">AboutItem3</span>
</div>
</div>

Say I continue this pattern until item5... and I wanted to make it so that when the page loads, it would search for the div with itemname "Item5", and scroll to it so that it is visible. Assume that the listofstuffdiv is sized small such that only 3 anitems are shown at any given time, but since overflow:auto exists, user can scroll.

I want to make it so that jquery can scroll to the item it found so it is visible without the user having to scroll down to item5;.

解决方案

See this fiddle: http://jsfiddle.net/pixelass/uaewc/2/

You don't need the scrollTo plugin for this..

jQuery

$(document).ready(function(){
    lastElementTop = $('#listofstuff .anitem:last-child').position().top ;
    scrollAmount = lastElementTop - 200 ;

$('#listofstuff').animate({scrollTop: scrollAmount},1000);
});

CSS

.anitem {
height:100px;
}

#listofstuff {

height:300px;
    overflow:auto;
}

---

with a little more action and variables http://jsfiddle.net/pixelass/uaewc/5/

---

$(document).ready(function() {
    var wrapper = $('#listofstuff'),
    element = wrapper.find('.anitem'),
    lastElement = wrapper.find('.anitem:last-child'),
    lastElementTop = lastElement.position().top,
    elementsHeight = element.outerHeight(),
    scrollAmount = lastElementTop - 2 * elementsHeight;

    $('#listofstuff').animate({
        scrollTop: scrollAmount
    }, 1000, function() {
        lastElement.addClass('current-last');
    });
});

这篇关于如何自动滚动到jQuery目标div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！