1 down vote favorite 4 I am trying to make an animated scroll to a bottom button using jQuery that fades out when the page is located at the bottom. I have found this code on the internet and modified it, but I could not get it work. <script> //to..

1down votefavorite

4

I am trying to make an animated scroll to a bottom button using jQuery that fades out when the page is located at the bottom. I have found this code on the internet and modified it, but I could not get it work.

 <script>
    //to bottom
    $(document).ready(function(){

        // hide #back-top first

        $("#back-bottom").show();

        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop()  1) {
                    $('#back-bottom').hide();
                } else {
                    $('#back-bottom').show();
                }
            });

            // scroll body to 0px on click
            $('#back-bottom a').click(function () {
                $('body,html').animate({ scrollTop: 0 }, 800);
                return false;
            });
        });

    });
    </script>

jquery scroll

shareimprove this question

edited Sep 8 '12 at 4:50

chembrad

57931227

asked Sep 8 '12 at 4:36

user1656139

15113

• 1
  can you show your html markup too – Sibu Sep 8 '12 at 4:37
• Create a fiddle for this please so people can see what's going wrong exactly. It's hard to guess – AsciiomSep 29 '12 at 8:10

add a comment

3 Answers

activeoldestvotes

up vote4down voteaccepted

I think you need to calculate body height and pass that to the scrollTop parameter in the animate

$('body,html').animate({ scrollTop: $('body').height() }, 800);

Check here the working demo

shareimprove this answer

answered Sep 8 '12 at 4:40

Harsh Baid

5,69253474

• Thanks I really appreciate it and please do give me that demo link – user1656139 Sep 8 '12 at 4:47
• updated my answer pls check now.. – Harsh Baid Sep 8 '12 at 4:52

add a comment

up vote5down vote

$('#back-bottom a').click(function () {
                $('body,html').animate({ scrollTop: $('body').height() }, 500);
                return false;
            });

i think it will work for you

shareimprove this answer

answered Sep 8 '12 at 4:47

Anudeep

4112734

• Should work for scrolling to the bottom, but there was also an error in the code for showing the button when not at the bottom. – Michael Peterson Sep 8 '12 at 4:58
• thanks soo much it works great howerever 2 problems 1 it does not scroll smooth and 2 it does not fade out please tell me how to achive that thanks – user1656139 Sep 8 '12 at 4:59
• first think u needed is smooth scroll for that 500 increase to 1000 or how much u needed depending upon that – Anudeep Sep 8 '12 at 5:06 
• for fade out use this code $('#back-bottom a').fadeOut('slow'); (after this code use fade out code $('body,html').animate({ scrollTop: $('body').height() }, 500); ) – Anudeep Sep 8 '12 at 5:08 

add a comment

up vote0down vote

Created an example fiddle that works:

http://jsfiddle.net/z5JNc/

Changed the condition to hide the button to: if($(window).scrollTop() + $(window).height() == $(document).height())

To scroll back to the top, added a variable that gets the height of the body: var $elem = $('body')Then when the link is clicked, changed the value to be: scrollTop: $elem.height()

shareimprove this answer