window.top.document.body.scrollTop not working in Chrome or FireFox

javascript scrolltop not working
document documentelement scrolltop not working in edge
window.scrollto not working in firefox
window.scrollto not working react
firefox scrolltop
javascript scrolltop not working on mobile
scrolltop always 0
scrollto not working in chrome

I have the code below that will open a modal window. This works in IE 8 but not in Chrome or FF. I am new to the world of cross browser functionality.

function ShowModal(WindowID,FramesetID)
{
    window.onscroll = function () { window.top.document.getElementById(WindowID).style.top = window.top.document.body.scrollTop; };
    window.top.document.getElementById(WindowID).style.display = "block";
    window.top.document.getElementById(WindowID).style.top = document.body.scrollTop;

    widthv=parseInt(parseInt(screen.width)/1.50);
    heightv=parseInt(parseInt(screen.height)/1.50); 

    window.top.document.getElementById(FramesetID).style.width=widthv;
    window.top.document.getElementById(FramesetID).style.height=heightv;
}

Can anyone help in making this code Chrome & FF compatible? I tried changing window.top to window.parent but no luck Also, any rules to keep in mind when coding for multiple browsers (I have browsed through but didn't quite find any set of rules for cross browser compatibility)?

Update: The issue is that in IE, this modal window appears in approximately half the screensize. In FF and Chrome, the modal window appears about the size of a dollar coin.


I'd recommend jQuery like chrispanda has suggested. jQuery has a built in scroll event and the rest can be written in just a few lines to manipulate the html / css.

http://api.jquery.com/

document.body.scrollTop Firefox returns 0 : ONLY JS, Seems like Chrome does not play along with the answer, to be safe use as window.pageYOffset || document.documentElement.scrollTop  If it work all fine for Mozilla, with html,body selector, then there is a good chance that the problem is related to the overflow, if the overflow in html or body is set to auto, then this will cause chrome to not work well, cause when it is set to auto, scrollTop property on animate will not work, i don't know exactly why! but the solution is to omit the overflow, don't set it! that solved it for me! if you are setting it to auto, take it off!


Depending on your browser's current rendering mode, you may need to use document.documentElement.scrollTop instead of document.body.scrollTop (and likewise for scrollLeft).

There's some good background on this problem in an Evolt article by Peter-Paul Koch (of quirksmode.org fame), but it's from 2002 and is a bit dated now.

As others here are suggesting, the easiest way to solve this kind of problem in 2011 is to just use an existing JavaScript framework. jQuery is quite popular (especially among StackOverflow users), but there are many others as well.

[Solved] Java Script Scroll Top is not working in Chrome Browser , I am setting vertical scrollbar value using "document.documentElement.scrollTop =200;". It is working fine in Firefox and IE but it is not working in  tried only with 'html', and Firefox and Explorer work, but now Chrome does not support this. So needed body for Chrome, and html for Firefox and Explorer. Is it a jQuery bug? don't know. Just beware of your function, since it will run twice.


Another solution:

(document.documentElement.scrollTop || document.body.scrollTop)

Element.scrollTop, The Window.scroll() method scrolls the window to a particular place in the document. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper put the 100th vertical pixel at the top of the window --> <button scrollTop and Element. Working Draft, Initial definition. I am setting vertical scrollbar value using "document.documentElement.scrollTop=200;". It is working fine in Firefox and IE but it is not working in Google Chorme. How to set this value in Google Chrome? Thanks in advance.


you can use:

window.pageYOffset

Window.scroll(), If the document isn't scrolled at all up or down, then scrollY is 0. scrollY) { window.scroll(0, 0); // reset the scroll position to the top left of scrollTop : document.body. Subpixel precision, Chrome Full support Yes, Edge Full support ≤18 Chrome Android Full support Yes, Firefox Android Full support 55   I have the code below that will open a modal window. This works in IE 8 but not in Chrome or FF. I am new to the world of cross browser functionality. function ShowModal(WindowID,FramesetID) {


If you don't see the need for unecessary third party libraries, you could try:

var scrollTop = (document.documentElement || document.body.parentNode || document.body).scrollTop;

It's hacky, but it's still better than JQuery.

Window.scrollY, scrollTo() scrolls to a particular set of coordinates in the document. window. scrollTo(0, 1000);. Using options : window.scrollTo({ top: 100, left: 100, behavior: ' smooth' }); scrollTop and Element. Working Draft, Initial definition. ScrollToOptions parameter, Chrome Full support 45, Edge Full support 79  Window.scrollTo() scrolls to a particular set of coordinates in the document. Syntax window.scrollTo(x-coord, y-coord) window.scrollTo(options) Parameters. x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.


Window.scrollTo(), Hi, I have a custom post type single page template with a scroll to top button. document.body. scrollTop = 0; // For Chrome, Firefox, IE and Opera jQuery( document).ready(function($) { var $window = $(window); var body I investigated further and decided that it's not worth the effort since it is working. I have upgraded to windows 10 with great enthu. But after installed only MS Edge is working , also I have installed Latest Chrome and Mozila Firefox(40.0.2) versions but its is not working. For Chrome ,while search for anything and getting these-" This webpage is not available


Scroll to top slow - Support, Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically: var html = document.documentElement; // Chrome, Firefox, IE and Opera places the overflow at the <html> window.onscroll = function() {myFunction()}; Slide in an element when the user has scrolled down 350 pixels from the top of the  ScrollTo jquery is not working in firefox but working in both chrome and opera. Any ideas or hack to make it work smoothly in firefox? Something like this: function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } In firefox, this code does not produce any scrooll to top or bottom effect but stays as it is inactive. I need […]


element.scrollTop, This works perfectly in Firefox: this. scrollTop but in Safari I'm always getting 0, no matter what. document.body. const scrollTop = Math.max(window. Yes, my problem was overflow-x: hidden on a body element. Check