1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Smooth Scoll

  • Benny-Fotografie
  • 17. März 2014 um 20:13
  • Benny-Fotografie
    Anfänger
    Beiträge
    3
    • 17. März 2014 um 20:13
    • #1

    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...:confused:

    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! :)

  • nadjak
    Azubi(ne)
    Beiträge
    45
    • 18. März 2014 um 08:02
    • #2

    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

  • Benny-Fotografie
    Anfänger
    Beiträge
    3
    • 18. März 2014 um 16:08
    • #3

    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):

    HTML
    <!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>
    Alles anzeigen
  • explanator
    Prinz(essin)
    Reaktionen
    1
    Beiträge
    834
    • 18. März 2014 um 21:39
    • #4

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

Tags

  • hilfe
  • www
  • html
  • http
  • links
  • body
  • text
  • webseite
  • click
  • href
  • location
  • code
  • fehler
  • javascript
  • google
  • scrollen
  • scroll
  • script
  • animation
  • people
  • anker
  • ready
  • offset
  • hash
  • smooth scoll
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern