Can't get page to scroll to top on click

Question

So I'm migrating a webpage from a basic structure to WordPress and one of the pages has a table of contents. The ToC has plus signs that allow you to expand different areas of the ToC and when you click on links and what not, the body scrolls properly, however, the actual HTML tag of the entire page is not scrolling up.

So basically, this is a very rough mock up of what the page is laid out like

<html overflow-y: scroll; margin-left/right: auto; width: 1235px;>
<body overflow-y: scroll>
...primary content here centered by html css
</body>
</html>

So basically, clicking the plus signs properly uses href tags to set the BODY scroll window, however, since the html document isn't scrolling as well, it doesn't properly align the page to the header of the section you just clicked to navigate to. Here is the code for the openClose function utilized by the plus signs:

function openClose(theName, menuArray, theID) {

 for(var i=0; i < menuArray.length; i++) {
  if (menuArray[i] == theID) {
    if (document.getElementById(theID).style.display == "block") {
      document.getElementById(theID).style.display = "none";
      document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
      eraseCookie(theName); }
    else {
      document.getElementById(theID).style.display = "block";
      document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
      newCookie(theName,menuArray[i],exp); }
    }
 else {
    document.getElementById(menuArray[i]).style.display = "none";
    document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; }
 }
    $(window).scrollTop(0); // this is just one of many examples 
}

The scrollTop is just one of the many examples I've tried, to get the HTML document to scroll to the top, however, nothing just seems to do anything. I'm not trying to scroll the body, I want to scroll the master vertical scroll bar. I figured that in the openClose on click function that I would put such a function at the end so that it scrolls the entire document back up after it navigates to the position defined by the on click event. But again, nothing happens. Am I missing something simple?

I googled and found this other page Scroll to the top of the page using JavaScript/jQuery? but none of the examples work.

http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery — Greg, Oct 14 '14 at 15:08
Yes....as mentioned in my original post I've been there and even linked to that page however none of the examples work... — Christopher Bruce, Oct 14 '14 at 15:11
This may sound dumb but have you checked the JS console in the browser? If you had a syntax error before it get's to the `scrollTop` line, perhaps the browser is never getting to that line of code. — mr rogers, Oct 14 '14 at 15:16
I haven't checked it however the openClose function does work. When I copied over the HTML for the table of contents, the plus signs didn't do anything, I added the necessary JS and then it functioned. I just can't get any of the scroll or scrollTo or similar functions to actually scroll, they just don't do anything... — Christopher Bruce, Oct 14 '14 at 15:17
Really though, your example code is missing one `}` (closing you first if after all the other ifs). — somethinghere, Oct 14 '14 at 15:43

score 0 · Answer 1 · answered Oct 14 '14 at 21:39

you can't use the $ sign for jquery in wordpress unless you define it. Swop with the word "jQuery" so in each place you would use $, use "jQuery". There are other ways if you look up safe mode jquery.

Also use console - chrome/ firefox = right click on a page element and select "inspect element" you will see console on the top menu of the window that appears. It will display js errors. In your code above you will see "undefined is not a function" a classic jQuery is not loaded error (or you have a conflict with the $ symbol and need to used safe mode jquery) and you will see a "unexpected" error as you are missing some brackets.

function openClose(theName, menuArray, theID) {

    for(var i=0; i < menuArray.length; i++) {

            if (menuArray[i] == theID) {
                if (document.getElementById(theID).style.display == "block") {
                   document.getElementById(theID).style.display = "none";
                   document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
                   eraseCookie(theName); 
                } else {
                   document.getElementById(theID).style.display = "block";
                   document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
                   newCookie(theName,menuArray[i],exp); 
                }
            } else {
                document.getElementById(menuArray[i]).style.display = "none";
                document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; 
            } 
    }
    jQuery(window).scrollTop(); // this is just one of many examples 
};

Can't get page to scroll to top on click

1 Answers1