CODEWITHSUNDEEP
javascripthtml
Mohammad
Mohammad

Reputation: 154

Why isn't my anchor tag smooth scrolling?

I have added this in the head

<script type="text/javascript" src="js/index.js"></script>

This is the link that navigates to the 'id="fillerSix"' div tag.

<h1><a href="#fillerSix">Mohammad Usman Khan</a></h1>

This is id="fillerSix" which the link should and does navigate to.

<div id="fillerSix" class="fillerSix">

This is my index.js file

<script type="text/javascript">
$('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
</script>

The link works, in that it directs the user to the anchor but there is no smooth scrolling.

Upvotes: 1

Views: 101

Answers (1)

Patrick Moore
Patrick Moore

Reputation: 13344

Your block in index.js should probably be wrapped in $(document).ready( function(){ /* your code here */ }); as indicated by DanielD above.

Likewise you do NOT need <script></script> tags inside of a .js file. This will lead to a parse error.

New contents of index.js:

$(document).ready( function(){
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Upvotes: 2

Related Questions