2015-06-14 16 views
7
nicht

arbeiten noch an meiner Seite: http://i333180.iris.fhict.nl/p2_vc/Javascript Smooth arbeitet

Es gibt eine Taste te Seite nach unten zu navigieren, die Aktion sofort aber smooth scrolling ist viel schöner.

Also google ich herum, versuchte viel und das kürzeste Skript, das ich fand, ist das auf: Aber ich kann es nicht funktionieren.

$(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    }); 

Ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Dies ist, wie ich zu meinem Code hinzugefügt zwischen

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    }); 
    </script> 
    </head> 

Button:

<body> 
    <a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a> 
</body> 

ich das Beispiel Website Hexe inspiziert wurde gegeben und fügte hinzu, es auf dem gleichen Weg zu meinem HTML. Ref inspizierten Link: https://css-tricks.com/examples/SmoothPageScroll/ Aber ich kann es Arbeit machen ..

Auch ich habe ein anderes Skript, Hexe, die gleiche Aktion muss nach dem Ende eines Videos. Script für das jetzt:

<script> 
     function videoEnded() { 
      window.location.href="#section"; 
     } 
    </script> 

Dieses, das Gleiche zu tun hat; gut scrollen.

Ich hoffte ich erklärte es verständlich, wenn nicht, würde ich es gerne noch einmal versuchen. Grüße

EDIT Skript ist nicht auf die Online-Seite hinzugefügt, weil das Skript funktioniert noch isnt, wenn sie es einleuchtender machen würde ich es online hinzufügen könnte.

Update Website ist online nicht funktioniert Skripte

Antwort

2

Das Skript auf die Links auf Ihre Live-Kopie wie gewünscht funktioniert, so dass ich glaube, Sie meine videoEnd() Funktion.

Das reibungslose Scroll-Skript, das Sie gefunden haben, funktioniert nur für Anchor-Tags (<a>).

Da window.location.href = "#section" kein Anker-Tag ist, wird es vom Skript nicht beeinflusst.

Was Sie jedoch tun können, ist, nehmen Sie die wichtigen Bits dieses Skripts und verwenden Sie es in Ihrer videoEnd() Funktion so.

function videoEnded() { 
 
    $('html,body').animate({ 
 
     scrollTop: $("#section").offset().top 
 
    }, 1000); 
 
}

EDIT:

Der Grund, es nicht für Sie funktioniert, weil Sie die Seite mit dem file://-Protokoll und das Skript Quelle surfen, die jQuery verknüpft ist

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Welche verwendet die // relativ Schema, was bedeutet, dass der Browser die aktuellen Browser-Programm anhängen wird, es in diese drehen ..

file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

die es nicht gibt. Wenn Sie http:// angeben, funktioniert es

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
0

Dieses Stück <script> ist viel besser:

$(document).ready(function() { 
    $("a[href*='#']").on("click", function(event) { 
     event.preventDefault(); 
     var href = event.target.href; 
     href = href.slice(href.indexOf("#"), href.length); 
     $("body").animate({ 
      scrollTop: $(href).get(0).offsetTop 
     }, 1000); 
    }); 
});