Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery scrollTop() method not working

I have the following jQuery code

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

where 'navtoTop' is the class of the button(something like 'Back to top') which has the fixed position in the bottom-left of the page and 'topofthePage' is the id of the <div> at the most top of my page.

I have even tried this

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

Here is the html code

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

I don't know what is going wrong but this is not working. Will someone explain and give a good solution?

Ask me the detail of code if you want.

like image 930
Danish Ansari Avatar asked Aug 28 '15 18:08

Danish Ansari


People also ask

Why is scrollTop not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

What is jQuery scrollTop?

jQuery scrollTop() Method The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.

What is scrollTop in JavaScript?

The Element. scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content.


3 Answers

You have to use window instead of html:

$(window).scrollTop( $("#topofthePage").offset().top );

Note that window should not be enclosed in quotes as i'ts an object and not a tag.

like image 124
taxicala Avatar answered Oct 03 '22 09:10

taxicala


A common scrollTo issue is having overflow set on the "html, body" element in css. Rarely mentioned when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering.

If overflow needs to be set, put it on the body element only. Not both html,body.

It is also a good habit to use a data-* attribute in place of classes or IDs in your html. This gets you in the habit of separating styles from code. Consider this to make your life easier in the future:

Create Reusable Scroll Function

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Create data attributes to html elements (data-name is arbitrary and should make sense):

ADD HTML LINK

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a> 

ADD HTML ELEMENT

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

VERIFY CSS » overflow added to "html,body" won't work

body { overflow-x: hidden; }

INIT FUNCTION ON READY » initialize on doc ready with attribute name selector to create flexibility on multiple calls

scrollioreceiver('[data-sender]');

Hope this helps!

like image 28
CR Rollyson Avatar answered Oct 03 '22 09:10

CR Rollyson


You already got an answer on this. But, since you also want a smooth scrolling, consider the following alternative:

$('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
}); 
like image 40
leo.fcx Avatar answered Oct 02 '22 09:10

leo.fcx