CODEWITHSUNDEEP
jquery
nsilva
nsilva

Reputation: 5614

jQuery - Scroll to not working as expected

I have the following code:-

HTML

<a href="#one-camera"><div class="col-30 camera-quantity left">
<h1>1<br />Camera<br /><span style="font-size: 34px;">Residential System</span></h1>
</div></a>

<a href="#two-camera"><div class="col-30 camera-quantity left">
<h1>2<br />Camera<br /><span style="font-size: 34px;">Residential Systems</span></h1>
</div></a>

<a href="#four-camera"><div class="col-30-end camera-quantity left">
<h1>4<br />Camera<br /><span style="font-size: 34px;">Residential Systems</span></h1>
</div></a>

<div id="one-camera"></div>

<div id="two-camera"></div> <!-- THESE ARE FUTHER DOWN THE PAGE -->

<div id="four-camera"></div>

jQuery

<script>
// Scroll to
jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        jQuerytarget = jQuery(target);
        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
</script>

For some reason, the three buttons at the top are all scrolling to #one-camera

Any ideas why this is not working as I'm expecting?

You can see it live here:-

http://176.67.174.179/ukcctvinstallations.co.uk/small-residential-systems/

Upvotes: 0

Views: 39

Answers (1)

Brewal
Brewal

Reputation: 8189

This is because everything is floated... Add a clear to your divs : 

#one-camera, #two-camera, #four-camera {
    clear: both;
}

Upvotes: 2

Related Questions