Jquery - scroll to div

Question

I cant make my Jquery work. I put in some code that should make a good looking scroll down to a div further down on the page. I added the HTML around the a tag and the jquery.

HTML

<div id="facebookbanner">   
    <div id="facebookbannertext">
        <div id="knapper">
            <div class="btn_apps"><a href="#fbeksempler"></a></div>
            <div class="btn_bestil"><a href="#"></a></div>
        </div>
     </div>
     <div id="facebookbannerbillede">   
     </div>
 </div>

Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$('#fbeksempler a').on('click', function(evt){
    evt.preventDefault();
    var target = $(this).attr('href');
    $('html, body').stop().animate({scrollTop: $(target).offset().top}, 2000);
});

</script> 

Answer 1

I believe the problem is that protocol relative URLs like //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js don't work when testing locally.
Maybe try http://code.jquery.com/jquery-1.9.1.min.js and see if that works for you.

Answer 2

It appears that the main issue is that you are setting your target variable to a string when you use the .attr() method. You are then trying to scroll to the top of that target, which is not a jQuery object representing a DOM element.

I am assuming what you intend to do is find the jQuery object somewhere on the page that has the ID equal to the href of the link.

$('#facebookbanner a').on('click', function (evt) {
    evt.preventDefault();
    var contentId = $(this).attr('href');
    var content = $(document).find(contentId);
    $('html, body').stop().animate({
        scrollTop: $(content).offset().top
    }, 2000);
});

jsfiddle

Answer 3

Try wrapping your functionality inside the DOMReady event:

$(function() {
    $('#fbeksempler a').on('click', function(evt){
        evt.preventDefault();
        var target = $(this).attr('href');
        $('html, body').stop().animate({scrollTop: $(target).offset().top}, 2000);
    });
});