0
Neu in Javascript, versuchen, ein einfaches Programm zu erstellen, das zum div scrollt, wenn Navigationselement angeklickt wird. Aber es funktioniert nicht, ich kann nicht herausfinden warum. HierScrolling Page mit jQuery funktioniert nicht
ist das Snippet:
$(document).ready(function() {
alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
})
}<nav class="clearfix">
\t \t \t <div class="logo-container">
\t \t \t \t <i><h2><b>DELIVERY MOTION</b></h2></i>
\t \t \t </div>
\t \t \t <ul class="clearfix">
\t \t \t \t <li><a id="delivery" href="#">Delivery</a></li>
\t \t \t \t <li><a id="about" href="#">About Us</a></li>
\t \t \t \t <li><a href="#">Services</a></li>
\t \t \t \t <li><a href="#">FAQ</a></li>
\t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t <li><a href="#">Login</a></li>
\t \t \t </ul>
\t \t \t <a href="#" id="pull">Menu</a>
\t \t </nav>
<div id="deliverySection">
\t \t <h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
\t \t <div id='fee-estimate-box'>
\t \t \t <form id='fee-estimate-form' action="#">
\t \t \t \t \t <legend id='delivery-text'>Delivery Fee Calculator</legend>
\t \t \t \t \t <span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
\t \t \t \t \t <span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
\t \t \t \t \t <span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
\t \t \t \t \t <input class='btn-submit' type="submit" value="BOOK NOW!">
\t \t \t </form>
\t \t </div>
\t \t <div id='silver-bar'>
\t \t \t <img src='img/red-car.png' alt='fast deliver'>
\t \t </div>
\t </div>
\t <div id="aboutSection">
\t \t <h2> How it works </h2>
\t \t <div class="container">
\t \t <div class="row">
\t \t <div class="col-sm-2" id="infobox">
\t \t \t \t \t <img src='img/map-icon.png' width="50px" height="50px">
\t \t \t \t \t <h3> Search </h3>
\t \t \t \t \t <h4>Select pickup address </h4>
\t \t </div>
\t \t <div class="col-sm-2">
\t \t \t \t \t <br><br>
\t \t \t \t \t <img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
\t \t </div>
\t \t <div class="col-sm-2" id="infobox">
\t \t \t \t \t <img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
\t \t \t \t \t <h3> Order</h3>
\t \t \t \t \t <h4>Make a booking online </h4>
\t \t </div>
\t \t \t \t <div class="col-sm-2">
\t \t \t \t \t <br>
\t \t \t \t \t <img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
\t \t </div>
\t \t \t \t <div class="col-sm-2" id="infobox">
\t \t \t \t \t <img src='img/truck-icon.png' width="50px" height="50px">
\t \t \t \t \t <h3> Delivered</h3>
\t \t \t \t \t <h4>Instant courier delivery</h4>
\t \t \t \t </div>
\t \t </div>
\t \t </div>
\t </div>Zuerst dachte ich, das Problem mit meinem Jquery war jedoch seine Arbeit gut. Die Links zu Javascript sind auch korrekt. Ich habe versucht, die Animate-Funktion zu überprüfen, aber ich kann das Problem nicht identifizieren. Irgendwelche Ideen?
Es sollte ein Komma zwischen 'html' und' body' in Ihrem 'setBindings()' Funktion sein. – agdhruv