jQuery - Smooth scroll code funktioniert nicht

Also, ich machte eine Webseite und wollte mit jQuery einige glatte Schriftrolle darin einfügen. Das Problem ist, dass mein Code nicht funktioniert und wenn ich auf den Link klicke, springt die Seite direkt zum Spot, anstatt sanft zu scrollen. Hier ist der relevat Teil des Codes -jQuery - Smooth scroll code funktioniert nicht

HTML -

<script src="scroll.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
</head> 
<body> 
<div id="sec1"> 
    <span id="header">Heading</span> 
    <!--<span id="notheader">Umesh meena is the coolest</span>--> 
    <!--<div id="navbar" class="before">lol</div>--> 
    <a href="#sec2" id="button1" >link to the page</a> 
</div> 
<div id="sec2"> 
    <span id="main">lorem</span> 
</div> 
</body> 
</html>

SCROLL.js Datei -

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash; 
     var $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
});

abgesehen davon ich ein anderes tun haben Javascript-Datei verknüpft (was ich sollte nicht denken sollte stören mit dem glatten-Scroll-Code. Bitte helfen/vorschlagen Optionen.

Quelle

2016-06-10 Umesh Meena

$(document).ready(function() { 
 
    $('a[href^="#"]').click(function(e) { 
 
    e.preventDefault(); 
 

 
    var target = this.hash; 
 
    var $target = $(target); 
 

 
    if ($target.length === 0) { 
 
     alert('No target!'); 
 
     return; 
 
    } 
 
    
 
    $('html, body').animate({ 
 
     scrollTop: $target.offset().top 
 
    }, 900, 'swing', function() { 
 
     window.location.hash = target; 
 
    }); 
 
    }); 
 
});

div[id*="sec"] { 
 
    margin-bottom: 500px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sec1"> 
 
    <span id="header">Heading</span> 
 
    <!--<span id="notheader">Umesh meena is the coolest</span>--> 
 
    <!--<div id="navbar" class="before">lol</div>--> 
 
    <a href="#sec2" id="button1">link to the page</a> 
 
    <a href="#sec3" id="button2">link to the page</a> 
 
    <a href="#sec4" id="button3">link to no target</a> 
 
</div> 
 
<div id="sec2"> 
 
    <span id="main">lorem</span> 
 
</div> 
 
<div id="sec3"> 
 
    <span id="main">ipsum</span> 
 
</div> 
 
<div id="notarget"> 
 
    <span id="main">Vous aved un chat.</span> 
 
</div>

Quelle

2016-06-10 10:31:57 keziah

jQuery - Smooth scroll code funktioniert nicht

Antwort

Verwandte Themen