CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aydan Aleydin
Aydan Aleydin

Reputation: 157

How to scroll down on click button 1 time

i want to know how i can scroll down only 1 time from homepage on click of button, if already scrolled then on click button to don't scroll down?

I'm suck with jQuery and i don't know how to do it. Currently using this code but its always back at #what-is-it id so i don't like this:

  $("#scroll").click(function() {
  $('html,body').animate({
    scrollTop: $("#what-is-it").offset().top},
    'slow');
          });

if you have solution with javascript its also welcomed.

Just want to scroll down if users is on homepage? And if he back at home page make button again scroll down him.

Upvotes: 2

Views: 2694

Answers (2)

Zedx
Zedx

Reputation: 128

Just use this styling for the navbar:

#nav {
    width: 100%;
    background-color: blue;
    position: fixed;
    bottom: 0;
}

And the solution for jQuery part is in this jsfiddle.

https://jsfiddle.net/Lnq2etu9/5/ - I think what you're looking for is this. I just edited Sim's code to make it work for you.

Upvotes: 2

Sim
Sim

Reputation: 3317

Yust unset your click event with jquery off(). Here ist the API: http://api.jquery.com/off/

So update your code like this:

$("#scroll").click(function() {
    $('html,body').animate({
        scrollTop: $("#what-is-it").offset().top},
        'slow');
    });
    //unset click event:
    $(this).off();
});

another possibility is to use one():

The .one() method is identical to .on(), except that the handler is unbound after its first invocation.

from the API: http://api.jquery.com/one/

$("#scroll").one('click', function() {
     $('html,body').animate({
         scrollTop: $("#what-is-it").offset().top},
         'slow');
     });
});

you wrote:

if already scrolled then on click button to don't scroll down?

unset your click function handler with the jquery onscroll function:

$(window).scroll(function() {
     $("#scroll").off();
});

...if the user scrolls, this unsets your click event.

EDIT:

I've updated the code, you posted here and in the comment below:

//your scroll function
function scrollDown() {
    $('html,body').animate({
        scrollTop: $("#nav").offset().top
    },'slow');
}

//set your handler on page load
$("body").on("click", "#scroll", scrollDown);

//scrol event handler
$(window).scroll(function() {
      var navHeight = 300; // custom nav height
      if($(window).scrollTop() > navHeight) {
            $('#nav').addClass('goToTop');
            //finish scroll animation
            $('html,body').finish();
            //set event handler to #scroll with your scroll function
            $("body").off("click", "#scroll", scrollDown);
      } else {
            $('#nav').removeClass('goToTop');
            //unset event handler
            $("body").on("click", "#scroll", scrollDown);
      }
});

So this sets your click event to the button, when your navbar is stick to the top and removes it when not. And here is a link to an example fidde: http://jsfiddle.net/Lnq2etu9/3/

Upvotes: 1

Related Questions