Why won't the scroll bar go up when I use this javascript function?

Question

so I have this javascript:

$(window).scroll(function () {
    if ($(window).scrollTop() > 0 && !document.contains(document.getElementById('toTop'))) {
        var top = '<div id="toTop" onclick="tTop()"></div>';
        $('body').append(top);
    }
});
function tTop() {
    $('html,body').scrollTop(0);
}
$(window).scroll(function () {
    if (document.contains(document.getElementById('toTop')) && $(window).scrollTop() == 0) {
        $('div').remove('#toTop');
    }
});

It works just fine if the page is loaded while the scroll bar is at the top; however when I refresh the page while the scroll bar is at the bottom, the page will still scroll up, but the scroll stays at the bottom. Can anyone tell me how to fix this?

Answer 1

when I refresh the page while the scroll bar is at the bottom, the page will still scroll up, but the scroll stays at the bottom

Maybe I'm misreading this, but are you concerned that the buttons are staying at the bottom of the page? Or $(window).scrollTop() is set to 0 after you click the button, after a page refresh?

Regardless, I would separate the scroll callback to another method, checking if the element exists (I used a button for an example instead of a div)

function scrollCallback() {
    if ($(window).scrollTop() > 0) {
        if ($('body').has('#toTop').length == false) {
            var top = '<input type="button" id="toTop" onclick="tTop();" value="top" />';
            $('body').append(top);
        }
    } 
    else {
        // Removes the button if the scroll is at the top of the page.
        $('body #toTop').remove();
    }
}

Then on your page load, call the scrollCallback, and set your scroll to also use the scroll back:

$(function() {
    // Execute it when you load the page.
    scrollCallback();       
    $(window).scroll(scrollCallback);
});