✔ DIV klicken und zu einem anderen DIV scrollen

K

kharn

Erfahrenes Mitglied
Hallo zusammen.
Ist es eigentlich möglich ein DIV an zu klicken und dann zu einem anderen DIV weich / smooth hin gescrollt zu werden?

Es gibt ja das Plugin scrollTo, damit hab ichs ähnlich wie in diesem Thread probiert, aber leider ohne Erfolg :/

Mein eigentliches Problem ist zwar das ich ein Accordion script benutze und die Inhalte ziemlich groß sind, so das wenn man die oberste Kategorie öfnet und dann die nächste wird die oberste geschlossen und die nächste geöffnet, danach steht der browser aber nicht am Anfang der geöffneten Kategorie (hoffe ihr versteht was ich meine).
Nun würde ich gerne an das slideToggle mit dem ich die Kategorien öffne ein scrollto script hängen so daß wenn die inhalte alle geslide toggled sind die Seite zum Anfang der angeklickten Kategorie fährt.

statisch wollte ichs schonmal so probieren (später soll natürlich die ID entsprechend dem angeklickten DIV geändert werden) aber selbst mit einer hard gecodeten DIV ID klappts nicht, hoffe ihr habt eine Idee:

Code: 
    $(".cat_head").click(function(){
        curBox = $(this).parent();
		curBoxId = $(this).parent().attr("id");
		curHead = curBox.children(".cat_head");
		curContent = curBox.children(".cat_content");
		curBottom = curBox.children(".cat_bottom");


		curContent.slideToggle(250, function() {
			$.scrollTo("#motiondesign", {duration: 1000});
			}
		);
        $(".cat_content:visible").not(curContent).slideUp(250);
	});
 
Hi,

syntaktisch ist kein Fehler zu entdecken. In meinem Testdokument funktioniert es auch tadellos.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('.click_me').click(function(evt){
    $('#slide_me').slideToggle(250, function(){
      $.scrollTo('#get_me', {
      	duration: 1000
      });
    });
  });
});
 //-->
</script>
</head>
<body>
<div class="click_me">click me</div>
<div id="slide_me" style="display: none; height: 2000px; background: #efefef; border: 1px solid #ccc;">Inhalt</div>
<div id="get_me">Hier bin ich</div>
<div class="click_me">click me</div>
</body>
</html>
Um mehr sagen zu können, müsstest du mehr Informationen zur Verfügung stellen. Z.B. die zugehörige HTML-Passage oder eine Onlinevariante.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück