-2

I made a simple html file, with anchor links that can be clicked to scroll smoothly to their respective part of the page ( tags). The problem is that the scroll is not smooth at all! I watched a tutorial on youtube and the code used in there was (here's the code I adapted to fit on my project, but the way is the same):

function goto(numsection){
        var section = $('#section'+numsection);
        var offset = section.offset().top;
        $(document).scrollTop(offset);
        $(section).slide('slow');
}

When I click an anchor, the page scrolls down to the respective section, but the transition is immediate. In JavaScript console there's this error:

Uncaught TypeError: undefined is not a function

I don't understand, in the tutorial worked perfectly.

PS: I want to use slide() function if possible, not slideToggle() or similar.

lucasreta
  • 974
  • 1
  • 8
  • 23
dariodp
  • 333
  • 1
  • 3
  • 11

1 Answers1

0

I'm guessing you haven't watched that video.
In said video, that code you posted never achieves smooth scrolling, just sudden jumps.
I don't know why would you just want to use slide() and nothing but. I'm not familiar with slide(), I know slideUp() and slideDown(), but those serve other purposes.

However, here is the way I like to handle scrolling (or check out jsfiddle):

$(".link").on('click', function(e)
{        
    $(".link").each(function()
    {
        $(this).removeClass('selected');
    });

    $(this).addClass('selected');

    var scrollSpeed = 2000;
    var scrollTop = $(window).scrollTop() - 50;
    var id = $(this).attr('data-scroll-to');

    var goTo =  $('#s'+ id).offset().top;

    e.preventDefault();

    $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);

});
lucasreta
  • 974
  • 1
  • 8
  • 23
  • .............. I watched that video at least 4 times! And with the code I wrote up, it makes a smooth scroll. Maybe the problem is related to different jQuery versions... I don't know. – dariodp Jul 11 '14 at 21:02
  • I thought jQuery versions could be the problem. I still don't see what is that you refer to as "smooth scroll". Exact time in video could help. – lucasreta Jul 11 '14 at 21:06
  • Around 11:00. The smooth scroll doesn't appear to be very smooth because of the video, but it's smooth scroll (slide( ) function took 'slow' as a param = slide('slow')). – dariodp Jul 11 '14 at 21:08
  • The thing is the smooth scroll doesn't even appear to be scroll, and it's quickly replaced by the never-failing fadeIn. Try `animate()`, as suggested in my answer and in the comments above, or explain which is the result you are looking for that can't be achieved by use of this method. – lucasreta Jul 11 '14 at 21:13
  • The result I'm looking for is the same I get with animate(), but with the usage of slide() instead. Well, I will use animate()... thanks. – dariodp Jul 11 '14 at 21:16
  • _Why_ are you trying to use `slide()`? If the result is the same, what am I missing? Is there logic behind your desire to use `slide()`, or is it just a whim? – lucasreta Jul 11 '14 at 21:22
  • Because I'm trying to learn jQuery and slide() it seemed easier to me to remember and to use. Also, I wanted to know why didn't work. But ok, animate() is a good solution too. – dariodp Jul 11 '14 at 21:25
  • The thing is, `slide()` doesn't seem to be a jQuery function at all. – lucasreta Jul 11 '14 at 21:33
  • Maybe is totally deprecated. :/ – dariodp Jul 11 '14 at 21:52