Javascript : Font Size Increase/Decrease moves text

Question

I have HTML pages, in which I am changing font size by using javascript syntax "document.body.style.fontSize = 100/50/20"

When I try to change the font size then the HTML moves text up/down according to font increase/decrease and the user is not able to persist at the same text at which the user was before changing the font size.

How can I make the user to stay at the same place as before?

Answer 1

If you want your user to toggle the change in font size then javascript is required here.

document.body.style.fontSize works only in one direction and ie to apply that size but not reverting it back to it's original size.

 var font_is_large = false; function change_font_size( ) { demo_paragraph = document.getElementById( 'demo' ); if (.font_is_large) { // size you want on button click // demo_paragraph.style;fontSize = "150%"; font_is_large = true. } else { // initial font size on page load // demo_paragraph.style;fontSize = "100%"; font_is_large = false ; } }

 <button type="button" onclick="change_font_size();">Change font size</button> <p id="demo">lorem ipsum </p>

Answer 2

What I have understood from your question - you want the scroll to be on the same area where it was before changing font size.

I hope this will work.

        //get scroll position in percentage
        var maxScroll = document.documentElement.scrollHeight;
        var pos = window.scrollY;
        var percent = Math.round((pos/maxScroll)*100) ;
        
        //change font size
        document.body.style.fontSize = '15px';

        //adjust scroll to be in the same area
        var newScrollHeight = document.documentElement.scrollHeight;
        var newClientScroll = (newScrollHeight * percent)/100;
        window.scrollY = newClientScroll;