JQuery scrollto oder jumpto zum Link Anker

[fredolin]

Hallo JS Gemeinde,


sitze nun hier die ganze Nacht und google und lese in Foren.. Was suche ich... Ich bau eine Webseite und da soll dann zu einem Ankerlink hin gescrollt werden. Dies sollte mit JQuery etweder scrollto oder jumpto uws. gemacht werden.


so ier schon mal vorab das Script für die Left NAvi

 $leftNavi = array(
 		'home' => array(
 			'name'	=> 'Startseite',
 			'sub'	=> array(),
 		),
 		'unternehmen' => array(
 			'name'	=>	'xxxxxx',
 			'sub'	=> array()
 		),
 		'artbitrage' => array(
 			'name'	=>	'xxxxxxx',
 			'sub'	=>	array(
 				'sub01'	=>	'xxxxxl',
 				'sub02'	=>	'xxxxx',
 			)
 		),
 		'artlom' => array(
 			'name'	=>	'xxxxx',
 			'sub'	=>	array()
 		),
 		'managemant' => array(
 			'name'	=>	'xxxxx',
 			'sub'	=>	array(
 				'sub03'	=>	'xxxxx',
 				'sub04'	=>	'xxxxxxx',
 			)
 		),
	 );
 function leftNavi($leftNavi) {
 	foreach($leftNavi AS $link => $value) {
		if(count($value['sub']) > 0) {
			echo '<li><a href="#">'.$value['name']."</a>
				<ul class=\"subNav\">\n";
				foreach($value['sub'] AS $url => $name) {
					echo '<li><a href="#'.str_replace(" ", "_",strtolower($name)).'" class="scroll">'.$name."</a></li>\n";
				}
				echo "</ul></li>";
			} else {
				echo '<li><a href="?act='.$link.'">'.$value['name']."</a>\n";	
			}
		} 
 }

könnte man das noch etwas optimieren?

und nun der HTML Code
kürze denn dann etwas...

<div class="contentbox">
		   	<div class="scrollable vertical">
				<div>
				
				<!-- Start with 1 item //-->
					<div class="item">
						<h1 class="h1_headline">Das xxxxxx</h1>
						<p class="absatz">
							xxxxxxxxxxxxxxxxxhadfhasfadhglghfl
                                                      scAHFKJlhfjehflewhflef
						</p>
						<p class="absatz">
							<div class="infobild">
								<img src="http://www.tutorials.de/img/infopic.png" width="538" height="220"  />
							</div>
						</p>
                                       </div>
				<!-- ENd with1 item //-->
					<br />
					<br />
					<br />
					<br />
					
					
				<!-- Start with 2 item //-->
					<div class="item">
						<a name="arts_meets_capital"></a>
						<h1 class="h1_headline">XXXXXX</h1>
						<h2 class="h2_subheadline">XXXXXXXX</h2>
						<p class="absatz">
						<div class="block">	
		BLINDTEXT::::BLINDTEXT
						</p>
                                   </div>
                                   <div class="block">	
						<p class="absatz">
						BLINDTEXT::::BLINDTEXT
						</p>
						</div>
						<p>
							<a href="#top" style="float:right;margin-right:45px;">Nach Oben</a>
						</p>
						<br />
						<br />
						<br />
					
					
					</div>
				<!-- ENd with1 item //-->
					<br />
					<br />
					<br />
				</div>
		 	</div>
			</div>

nun das JQuery Script

<!-- JavaScript //-->
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<script type="text/javascript"> 
	$(document).ready(function() {
		$(window).load(function() {

	<!--Jquery Scrollto //-->
			 // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });	
			
		});
	 });
</script>

So kann mir da nun ein bei helfen?

Gruß
Matthias

 

[michip96]

Die Seite ist leider offline, trotzdme habe ich einen Tipp:

function scrollTo(id){
	$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

das rufst du dann auf über

scrollTo("id deines elementes");

Das ganze kann man dann zB. mit

<div id="anker">Hier dein Anker Element</div>

<a onclick="scrollTo("anker")> Zum Element scrollen </a>

lösen.

Ich hoffe ich konnte dir etwas weiterhelfen. Ich kann den Code oben leider auch gerade nicht testen, musst also selbst probieren.