0

The script below displays a dotted line from the top of the screen to an up arrow which position depends on how far down the page the user has scrolled so that they can then click the arrow to scroll back to the top. This works great in Chrome but doesn't work at all in IE or Firefox, i.e. the dotted line does not grow nor does the arrow move down the page on scroll.

Does anyone know why this is?

HTML:

<div id="dotted-line">
    <div id="up-arrow">^up</div>
</div>

JS:

$(window).scroll(function(){
    if ($(window).scrollTop() > 10) {
        var pos = $('body').scrollTop();
        $('#dotted-line').css('height',pos/4);
        $('#up-arrow').css('top',pos/4);
    } else {
        $('#dotted-line').css('height','6px');
        $('#up-arrow').css('top','-150px');
    }
});

P.S. I've tried doing a JSFiddle but I don't think you can scroll, therefore I cannot demonstrate this.

LeeTee
  • 6,401
  • 16
  • 79
  • 139
  • possible duplicate, use animate insteead scrollTop method - > http://stackoverflow.com/questions/13397533/scrolltop-doesnt-work-on-firefox-and-ie – Vitaliy Terziev Feb 09 '16 at 11:28
  • Why dont you use `position:fixed;` as style for your `dotted-line` div? – om1 Feb 09 '16 at 11:32

1 Answers1

0

Chrome scrolls with body, IE/Firefox scroll with html. Personally I think html makes more sense, but that's just like my opinion, man.

Use 'html,body' as a selector when attempting to do stuff with scroll - that includes in your $(...).scrollTop() > 10 check.

To avoid re-evaluating the selector every time, consider wrapping the code:

(function(undefined) {
    var container = $("html,body");
    $.windowScrollTop = function(newval) {
        if( newval === undefined) {
            return container.scrollTop();
        }
        else {
            return container.scrollTop(newval);
        }
    }
})();
// call $.windowScrollTop() to get position
// call $.windowScrollTop(100) to set position to 100

Note that I'm not sure how necessary the "check for undefined and call separately" bit is needed. I'm not sure how jQuery would react to being literally passed undefined as an argument, so I'm playing it safe.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Sorry but your function seems alien to me. I cant see how this would work, it doesn't reference the elements. I am not great with JQuery so perhaps I just need a bit of explanation. Thanks. – LeeTee Feb 09 '16 at 11:45
  • The code I've given would be something you add to your initial code. You can then call it later, such as when you're defining your `$(window).scroll` event. – Niet the Dark Absol Feb 09 '16 at 11:56
  • I have tried using your code but I can't get it working ;/ – LeeTee Feb 09 '16 at 12:02
  • It breaks it in Chrome as well now. I don't get any errors in the console though. Please help. – LeeTee Feb 09 '16 at 12:24
  • [Here](https://jsfiddle.net/39ocdwj5/1/) is a simple demo showing this code in use, including how to get and set the scroll position. – Niet the Dark Absol Feb 09 '16 at 13:49
  • ahh, I get it now. Thanks for your help. – LeeTee Feb 09 '16 at 14:42