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>

@Sven yes i am testing locally. – McKeene Feb 13 '13 at 14:52 — McKeene, Feb 13 '13 at 14:52

score 1 · Accepted Answer · answered Feb 13 '13 at 13:20

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

score 0 · Answer 2 · answered Feb 13 '13 at 12:27

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);
    });
});

score 0 · Answer 3 · answered Feb 13 '13 at 15:14

0

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.

answered Feb 13 '13 at 15:14

Sven

12,997
27
90
148

Jquery - scroll to div

3 Answers3

Linked