CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Code2016
Code2016

Reputation: 107

Scrolling Page with jQuery not working

New to javascript, trying to create a simple program that scrolls to the div when navigation item is clicked. However, its not working, I can't figure out why.

Here is the 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">
			<div class="logo-container">
				<i><h2><b>DELIVERY MOTION</b></h2></i>

			</div>

			<ul class="clearfix">
				<li><a id="delivery" href="#">Delivery</a></li>
				<li><a  id="about" href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Contact</a></li>

				<li><a href="#">Login</a></li>

			</ul>



			<a href="#" id="pull">Menu</a>
		</nav>


    <div id="deliverySection">
		<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
		<div id='fee-estimate-box'>
			<form id='fee-estimate-form' action="#">
					<legend id='delivery-text'>Delivery Fee Calculator</legend>
					<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
					<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
					<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
					<input class='btn-submit' type="submit" value="BOOK NOW!">
			</form>

		</div>
		<div id='silver-bar'>
			<img src='img/red-car.png' alt='fast deliver'>
		</div>
	</div>
	<div id="aboutSection">
		<h2> How it works </h2>
		<div class="container">
		  <div class="row">
		    <div class="col-sm-2" id="infobox">
					<img src='img/map-icon.png' width="50px" height="50px">
					<h3> Search </h3>
					<h4>Select pickup address </h4>
		    </div>
		    <div class="col-sm-2">
					<br><br>
					<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
		    </div>
		    <div class="col-sm-2"  id="infobox">
					<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
					<h3> Order</h3>
					<h4>Make a booking online </h4>
		    </div>
				<div class="col-sm-2">
					<br>
					<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
		    </div>
				<div class="col-sm-2"  id="infobox">
					<img src='img/truck-icon.png' width="50px" height="50px">
					<h3> Delivered</h3>
					<h4>Instant courier delivery</h4>
				</div>
		  </div>
		</div>
	</div>

At first I thought the problem was with my jquery, however its working fine. The links to javascript is correct too. I've tried rechecking the animate function but I can't pin point the issue. Any ideas?

Upvotes: 0

Views: 74

Answers (4)

technico
technico

Reputation: 1172

$("html body") has to be replaced by $("html,body") for the scroll to trigger. You also had an error in your javascript, one more '})'at the end. Now that's fine. Check your console for such errors, or use snippets, as in your question.

$(document).ready(function() {
    //  alert("asda");
    
        setBindings();
    });
    
    function setBindings() {
        $("nav a").click(function(e) {
  
        var sectionID = e.currentTarget.id + "Section";
       // alert('button id ' + sectionID+ $("#" + sectionID).offset().top);
    
        $("html,body").animate({
          scrollTop: $("#" + sectionID).offset().top
        }, 1000);
        })
    
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
			<div class="logo-container">
				<i><h2><b>DELIVERY MOTION</b></h2></i>

			</div>

			<ul class="clearfix">
				<li><a id="delivery" href="javascript:;">Delivery</a></li>
				<li><a  id="about" href="javascript:;">About Us</a></li>
				<li><a href="javascript:;">Services</a></li>
				<li><a href="javascript:;">FAQ</a></li>
				<li><a href="javascript:;">Contact</a></li>

				<li><a href="javascript:;/">Login</a></li>

			</ul>



			<a href="#" id="pull">Menu</a>
		</nav>


    <div id="deliverySection">
		<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
		<div id='fee-estimate-box'>
			<form id='fee-estimate-form' action="#">
					<legend id='delivery-text'>Delivery Fee Calculator</legend>
					<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
					<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
					<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
					<input class='btn-submit' type="submit" value="BOOK NOW!">
			</form>

		</div>
		<div id='silver-bar'>
			<img src='img/red-car.png' alt='fast deliver'>
		</div>
	</div>
	<div id="aboutSection">
		<h2> How it works </h2>
		<div class="container">
		  <div class="row">
		    <div class="col-sm-2" id="infobox">
					<img src='img/map-icon.png' width="50px" height="50px">
					<h3> Search </h3>
					<h4>Select pickup address </h4>
		    </div>
		    <div class="col-sm-2">
					<br><br>
					<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
		    </div>
		    <div class="col-sm-2"  id="infobox">
					<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
					<h3> Order</h3>
					<h4>Make a booking online </h4>
		    </div>
				<div class="col-sm-2">
					<br>
					<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
		    </div>
				<div class="col-sm-2"  id="infobox">
					<img src='img/truck-icon.png' width="50px" height="50px">
					<h3> Delivered</h3>
					<h4>Instant courier delivery</h4>
				</div>
		  </div>
		</div>
	</div>

Upvotes: 1

technico
technico

Reputation: 1172

As pointed by OP It's working without javascript. We all should have been more clever about this, as anchors are common.

  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
			<div class="logo-container">
				<i><h2><b>DELIVERY MOTION</b></h2></i>

			</div>

			<ul class="clearfix">
				<li><a id="delivery" href="#">Delivery</a></li>
				<li><a  id="about" href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Contact</a></li>

				<li><a href="#">Login</a></li>

			</ul>



			<a href="#" id="pull">Menu</a>
		</nav>


    <div id="deliverySection">
		<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
		<div id='fee-estimate-box'>
			<form id='fee-estimate-form' action="#">
					<legend id='delivery-text'>Delivery Fee Calculator</legend>
					<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
					<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
					<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
					<input class='btn-submit' type="submit" value="BOOK NOW!">
			</form>

		</div>
		<div id='silver-bar'>
			<img src='img/red-car.png' alt='fast deliver'>
		</div>
	</div>
	<div id="aboutSection">
		<h2> How it works </h2>
		<div class="container">
		  <div class="row">
		    <div class="col-sm-2" id="infobox">
					<img src='img/map-icon.png' width="50px" height="50px">
					<h3> Search </h3>
					<h4>Select pickup address </h4>
		    </div>
		    <div class="col-sm-2">
					<br><br>
					<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
		    </div>
		    <div class="col-sm-2"  id="infobox">
					<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
					<h3> Order</h3>
					<h4>Make a booking online </h4>
		    </div>
				<div class="col-sm-2">
					<br>
					<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
		    </div>
				<div class="col-sm-2"  id="infobox">
					<img src='img/truck-icon.png' width="50px" height="50px">
					<h3> Delivered</h3>
					<h4>Instant courier delivery</h4>
				</div>
		  </div>
		</div>
	</div>

Upvotes: 0

brk
brk

Reputation: 50346

Mostly it is because of the typo. There is an extra ) & } at the end of the function

I Have created a JSFIDDLE and it is working here

Upvotes: 0

Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

Try this one, for the scrolling.

$('#your_image_for_the_scroll').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
    });

This image could appear after user does scroll down a bit:

$(window).scroll(function () {
        if ($(this).scrollTop() >= 20) {        // If page is scrolled more than 20px
            $('#your_image_for_the_scroll').fadeIn(200);
        } else {
            $('#your_image_for_the_scroll').fadeOut(200);
        }
    });

Upvotes: 0

Related Questions