Blättern Elternteil Spitze Kind element

Ich versuche zu scrollen ein div, so dass eine Verknüpfung in der es erscheint.

JS:

$(document).ready(function(){

    scrollit();
  
  
});

function scrollit(){
  
  	var elem= $("#link10");
							  
	if(elem.length){
		console.log(elem.offset().top);
		$("#sidebar").animate({ scrollTop: elem.offset().top }, { duration: 'medium', easing: 'swing' });
	}
  
  
}

CSS:

#sidebar{
  
  height:80px;
  width:200px;
  overflow:scroll;
  
  
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='sidebar'>
         <a href='#' id='link1'>1</a><br/>
         <a href='#' id='link2'>2</a><br/>
         <a href='#' id='link3'>3</a><br/>
         <a href='#' id='link4'>4</a><br/>
         <a href='#' id='link5'>5</a><br/>
         <a href='#' id='link6'>6</a><br/>
         <a href='#' id='link7'>7</a><br/>
         <a href='#' id='link8'>8</a><br/>
         <a href='#' id='link9'>9</a><br/>
         <a href='#' id='link10'>10</a><br/>
         <a href='#' id='link11'>11</a><br/>
         <a href='#' id='link12'>12</a><br/>
         <a href='#' id='link13'>13</a><br/>
         <a href='#' id='link14'>14</a><br/>
         <a href='#' id='link15'>15</a><br/>
         <a href='#' id='link16'>16</a><br/>
         <a href='#' id='link17'>17</a><br/>
         <a href='#' id='link18'>18</a>
    </div>

<br/><br/>
<a href='#' onclick='scrollit();return false'>again</a>

Auf den ersten, es melden sich die offset-als eine bestimmte Distanz (sagen, 45), und Blättern Sie, um es korrekt. Dann, wenn es wieder läuft, die protokolliert Abstand ist 0 und wird dann Blättern Sie zu der Spitze der sidebar. Es sollte sagen, dass element.

Ihre Frage ist nicht klar .. wie kann man Blättern übergeordneten oben in das child-element ... Ist es, dass Sie einen Bildlauf durchführen möchten, das Kind link, um die Spitze oder die Gründung von Eltern-div ??
ja, siehe code snippet

InformationsquelleAutor danielb | 2014-09-18

7

Dein code funktioniert gut, wie Sie sehen können, in das jsbin

Das problem ist, dass die elem.offset().top Wert ist relativ zum aktuellen scroll-position, so dass Sie nehmen in Konto, und setzen Sie entweder den Bildlauf-oder discount-die scroll-position (mit so etwas wie window.pageYOffset).

UPDATE:

Lösung von danielb:
```
$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' }); 
```
- Es funktioniert nicht, jedes mal, wenn Sie klicken Sie auf erneut ausführen, es springt hin und her...
- bitte achten Sie auf die Antwort
- haben Sie ein Beispiel? Die pageoffset nicht funktionieren, da der offset der div-element
- Diese Antwort am nächsten ist. Die Lösung: $("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });
- mein schlechtes daniel ... pageYOffset würde Ihnen helfen, wenn der Körper wurden gescrollt ... ich bin froh, dass Sie es geschafft haben, eine Lösung zu finden
- Dies funktioniert nicht für meinen Fall. Wenn Sie das übergeordnete div-Element positioniert innerhalb einer absoluten Elternteil, dann ist für mich $("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.position().top }, { duration: 'medium', easing: 'swing' }); würde funktionieren. Mit offset nur es sprang auf und ab
InformationsquelleAutor rafaelcastrocouto

Können Sie verhindern, dass die animation auslösen wieder einmal das Element ist auf der Oberseite mit einer zusätzlichen Bedingung wie folgt:

JS:

$(document).ready(scrollit);

function scrollit(){
  
  var elem = $("#link10");
  if(elem.length && elem.position().top){
     $("#sidebar").animate({ scrollTop: elem.position().top }, { duration: 'medium', easing: 'swing' });
  }
}

CSS:

#sidebar{
  
  height:80px;
  width:200px;
  overflow:scroll; 
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='sidebar'>
         <a href='#' id='link1'>1</a><br/>
         <a href='#' id='link2'>2</a><br/>
         <a href='#' id='link3'>3</a><br/>
         <a href='#' id='link4'>4</a><br/>
         <a href='#' id='link5'>5</a><br/>
         <a href='#' id='link6'>6</a><br/>
         <a href='#' id='link7'>7</a><br/>
         <a href='#' id='link8'>8</a><br/>
         <a href='#' id='link9'>9</a><br/>
         <a href='#' id='link10'>10</a><br/>
         <a href='#' id='link11'>11</a><br/>
         <a href='#' id='link12'>12</a><br/>
         <a href='#' id='link13'>13</a><br/>
         <a href='#' id='link14'>14</a><br/>
         <a href='#' id='link15'>15</a><br/>
         <a href='#' id='link16'>16</a><br/>
         <a href='#' id='link17'>17</a><br/>
         <a href='#' id='link18'>18</a>
    </div>

<br/><br/>
<a href='#' onclick='scrollit();return false'>again</a>

InformationsquelleAutor T J

0

was Sie tun können, finden Eltern top-offset und subtrahieren mit link-top-offset wird Ihnen immer die Distanz zwischen den beiden ..
```
var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}
```
aber stellen Sie sicher, dass das übergeordnete div hat position relative oder absolute (css)..
- funktioniert das nicht. parentPos ist immer 0 (div befestigt ist top)
InformationsquelleAutor Alok

Lösung:

Die Lösung:

  $("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration:'medium', easing: 'swing' });

InformationsquelleAutor danielb

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.