Scroll down button not working

Question

I want a simple scroll down button and it will go down to the section. I have tried literally every damn button and jQuery and Javascript there is to do this, but it just wont happen.

It links it to the section and moves there but it all happens instant, there is no slow animation, almost like it does not recognize the Javascript or jQuery.

This is my div where the button is in.

This is the jquery i am currently using, I have it right under the button and it is between <script> tags.

var scrolled=0;  $(document).ready(function(){
     $("#downClick").on("click" ,function(){
       scrolled=scrolled+100;

       $("html, body").animate({
               scrollTop:  scrolled
          });
     });

 });

body {
height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
   <button id='downClick'>Go Down</button>
</div>

The Code Snippet works as I want it to, but in laravel it just teleports instantly to the specified section.

Can someone please tell me why it doesn't do the animation?

for HTML attributes please use double quotes instead of this `id='downClick'` => `id="downClick"`, it's not the solution to your problem but it hurts my eyes — teeyo, Nov 06 '17 at 13:09

score 0 · Answer 1 · answered Nov 06 '17 at 13:04

0

You're not specifying the speed of the animation, by default it's fast, try this out :

var scrolled = 0;  
$(document).ready(function() {
   $("#downClick").on("click" ,function() {
       // I assume scrolled is the height of the element you want to scroll to
       scrolled = scrolled + 100;
       $('body,html').animate({ scrollTop: scrolled }, 800);
   });
});

answered Nov 06 '17 at 13:04

teeyo

3,665
3
22
37

thanks for your response. It still goes down instantly – Nov 06 '17 at 13:17

Daniyal Nasir · Accepted Answer · 2017-11-06T13:47:40.887

0

Try replacing: scrollTop: scrolled with scrollTop: $(document).height()

NOTE: Note the use of $(window).load (when images are loaded...which occupy height) rather than document.ready.

Ref: jQuery Scroll To bottom of the page

UPDATE: To scroll to a specific section replace scrollTop: $(document).height() To $("#my_section_to_scroll_to").offset().top

var scrolled=0;  $(document).ready(function(){
     $("#downClick").on("click" ,function(){
       scrolled=scrolled+100;

       $("html, body").animate({
               scrollTop:  $("#my_section_to_scroll_to").offset().top
          });
     });

 });

body {
height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
   <button id='downClick'>Go Down</button>
</div>
<div id="my_section_to_scroll_to" style="margin-top:300px;border:solid 1px">
my_section_to_scroll_to
</div>

edited Nov 06 '17 at 13:47

answered Nov 06 '17 at 13:21

Daniyal Nasir

669
7
22

okay it is working, it does the animation. But could you tell me how i can set it to the ID of the section? cause it fully scrolls down right now – Nov 06 '17 at 13:28
No problem, happy to help. Thought, next time make sure you research a little more before posting a question. Thanks. – Daniyal Nasir Nov 06 '17 at 13:29
this might help in that case. https://stackoverflow.com/questions/15991356/jquery-scroll-to-section-of-page – Daniyal Nasir Nov 06 '17 at 13:30
i searched it alot hahah but my javascript or jquery is absolutely terrible so i dont quite understand everything, so that really sucks! But how can i make it to go to a section ID. instead of the bottom of my page – Nov 06 '17 at 13:30
Ok, I hope scrolling to a specific section has also been resolved. – Daniyal Nasir Nov 06 '17 at 13:38
not really haha, i do not understand the js enouph to let it scroll to a section ID. Could you maybe if you have time show me how it works with my problem. I need it to scroll to the ID "about". – Nov 06 '17 at 13:42
I have updated my answer and add a snippet that scroll to an element using ID. This would solve your problem. It is working for me. – Daniyal Nasir Nov 06 '17 at 13:50
also this is of no use now. `scrolled=scrolled+100;` – Daniyal Nasir Nov 06 '17 at 13:52

score 0 · Answer 3 · 2017-11-06T13:29:45.043

If you want to the bottom of the document you could use this.

var scrolled=0;  $(document).ready(function(){
    $("#downClick").on("click" ,function(){
       scrolled = $(document).height()

        $("html, body").animate({
            scrollTop: scrolled
        });
    });

});

But you could use this to get down one element height.. or div or if you use + you can scroll multiple div height!

Scroll down button not working

3 Answers3