Ergebnis 1 bis 4 von 4

Thema: Smooth Scoll

  1. #1
    HTML Newbie
    Registriert seit
    17.03.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Smooth Scoll

    Guten Abend Zusammen,

    ich würde gerne auf meine Webseite das sogenannte Smooth Scroll haben. (langsames scollen von Ankern).
    Leider funktioniert das ganze irgendwie nicht so richtig und ich weiß nicht an was das ganze liegt...

    Hier mal ein Beispiel: http://unfold.no/#/people

    ich benutze folgenden Code:

    <!-- jQuery enbinden von Google-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // jQuery laden
    google.load("jquery", "1.3.2");
    </script>


    <!-- jQuery Code -->
    <script type="text/javascript">


    $(document).ready(function() {
    // Alle internen Links auswählen
    $('a[href*=#]').bind("click", function(event) {
    // Standard Verhalten unterdrücken
    event.preventDefault();
    // Linkziel in Variable schreiben
    var ziel = $(this).attr("href");
    //Scrollen der Seite animieren, body benötigt für Safari
    $('html,body').animate({
    //Zum Ziel scrollen (Variable)
    scrollTop: $(ziel).offset().top
    // Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
    }, 2000 , function (){location.hash = ziel;});
    });
    return false;
    });
    </script>


    Eigl. müsste jetzt doch jeder Anker auf der Webseite langsam runterscollen....dies tun sie alledings nicht. Ich weiß langsam echt nichtmehr was ich och machen könnte -.-

    Ich bitte um eure Hilfe!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    01.08.2011
    Ort
    bei München
    Beiträge
    45
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Smooth Scoll

    In deinem Codestück habe ich jetzt keinen Fehler entdeckt.
    Hast du denn im href deiner Menüpunkte auch die gleiche ID verwendet die du dann an deiner "Sprungmarke" als ID vergeben hast?
    z.B:
    im Menü: <a href="#punkt1">Punkt1</a>

    die betreffende Stelle auf deiner Seite wo hingescrollt werden soll: <div id="punkt1">BLABLABLA</div>

    Ich hoffe ich konnte dir helfen.
    Viele Grüße
    Nadja

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    17.03.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Smooth Scoll

    Vielen Dank erstmal für den Tipp!

    Nun funktioniert zwar das langsame runterscrollen, jedoch nur wenn ich den Link zum Anker am Rand Positioniere (ab einer bestimmten Linie erkennt er die Verlinkung nicht mehr ) Hat das was mit diesem "Margin" zu tun?

    Hier mal der Code für eine kleine Testseite (also quasi nur die Problemseite mit dem Anker):

    Code:
    <!DOCTYPE html>
    <html lang="de">
    	<head>
    		<meta charset="UTF-8">
    		<title>Home</title>
    		<meta name="generator" content="Serif WebPlus X7 (15,0,2,31)">
    		<meta name="viewport" content="width=960">
    			<!-- jQuery enbinden von Google-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // jQuery laden
    google.load("jquery", "1.3.2");
    </script>
    
    
    
    
    <!-- jQuery Code -->
    <script type="text/javascript">
    
    
    
    
    $(document).ready(function() {
    // Alle internen Links auswählen
    $('a[href*=#]').bind("click", function(event) {
    // Standard Verhalten unterdrücken
    event.preventDefault();
    // Linkziel in Variable schreiben
    var ziel = $(this).attr("href");
    //Scrollen der Seite animieren, body benötigt für Safari
    $('html,body').animate({
    //Zum Ziel scrollen (Variable)
    scrollTop: $(ziel).offset().top
    // Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
    }, 2000 , function (){location.hash = ziel;});
    });
    return false;
    });
    </script>
    
    
    <a href="#Position1"><img src="wpimages/wp09d25823_06.png" style="position:absolute;left:73px;top:163px;width:227px;height:61px; <map id="map1" name="map1"><area shape="poly" coords="247,57,203,0,0,156,44,213" alt=""><usemap="#map1" </map>
    
    
    <map id="map1" name="map1"><area shape="poly" coords="247,57,203,0,0,156,44,213" href="#Position1" alt=""></map>
    </a>
    		
    		<link rel="stylesheet" type="text/css" href="wpscripts/wpstyles.css">
    		<style type="text/css">
    			
    			
    			
    			
    			
    			
    			
    		</style>
    	</head>
    	<body   style="height:1000px;background:#ffffff;">
    		
    		
    		<div id="divMain"   style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:960px;height:1000px;">
    			
    			
    			
    
    
    			<!-- Künstlerischer Text Position 1 art_1 -->
    
    
    			<map id="map1" name="map1"><area shape="rect" coords="0,0,228,62" href="#Position1" alt=""></map>
    			
    			<img alt="Position1" usemap="#map1" src="wpimages/wp09d25823_06.png"  style="position:absolute;left:73px;top:163px;width:227px;height:61px;">
    			
    			
    
    
    			<!-- Künstlerischer Text Formel 1 formel1 -->
    
    
    			
    			<img alt="Position1" src="wpimages/wp1505964c_06.png" id="Position1"  style="position:absolute;left:73px;top:887px;width:265px;height:73px;">
    			
    			
    
    
    			
    			
    		</div>
    		
    		
    	</body>
    </html>

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Smooth Scoll

    Dein HTML-Code ist kaputt, benutze den W3C Validator um dir die Fehler anzuzeigen.

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •