Smooth Scrolling wird nicht reibungslos scrollen

Question

Ich habe eine Menge Themen auf glatten Blättern gelesen, und ich kann sie nicht zur Arbeit bringen. Ich dachte daran, den Code in die Ordnerdatei "js/script.js" zu schreiben und kopierte den Link "script.js" an den unteren Rand der Hauptseite. Muss ich das Skript für smooth scroll in der Hauptindex.html schreiben? Ich möchte diese Seite so sauber und prägnant wie möglich halten, daher das Outsourcing.

$('a[href^="#"]').on('click', function(event) { 
var target = $(this.href); 
if(target.length) { 
    event.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 700); 
} 
}); 

Spielt keine Rolle, wirklich, wenn es auf diese eine oder andere ehrfürchtige Stück Scrolling-Code ist fand ich online, meine Testseite blättert immer noch wie eine PC-Version von Windows 98.

Ich glaube, richtig class mit jedem href definiert haben, etwa so:

 `<ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a href="#page-top">Home</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a href="#about">About us</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a href="#contact">Contact</a> 
      </li> 
     </ul>` 

Couly Sie mir bitte helfen?

PS: Ist JS = jQuery?

Answer 1

Versuchen Sie, eine Klasse für die Aktion wie

$(document).ready(function(){ 
    $('.yourClass').on('click', function(event) { 
     ... 
    } 
)}; 

Und in Ihrem HTML zu definieren:

<ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <a class="yourClass" href="#contact">Contact</a> 
    </li> 
</ul> 

Auch jQuery ein libary ist JavaScript zu erweitern. Stellen Sie also sicher, dass Sie die neueste jQuery-Datei in Ihre index.html aufgenommen haben.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>