Click on Go to element #foo to scroll the page down to the #foo element. Then scroll back up here and click on the button to see the page scroll back to the #foo element.
That scrolling is the issue. The page should not scroll. The button is simply modify a <style> element. There are three seemingly unrelated preconditions that, combined, trigger this behavior.
The first is the presence of an anchor or "fragment identifier" in the URL. The fragment identifier must reference, by id, one of the elements on the page.
The second piece of the puzzle is that we need to dynamically add a <link> element to the DOM. In order to trigger this issue, appending of the <link> element must happen either via the "DOMContentLoaded" event or in the "readystatechange" event when document.readyState === 'interactive'. If the <link> is added when document.readyState === 'complete', there will be no jump.
The file's contents don't matter. As seen in the demo here, the file could even be a 404 and the issue will manifest. Only if the "href" property is omitted (left undefined) will the issue not occur.
For the final part, we simply construct a <style> element with document.createElement('style'); and add some CSS to it as a child "textNode".
The actual CSS properties we specify don't seem to matter. I tested with font-size, color, and width but for this demo I leave any style properties empty. The CSS selector also does not need to match any element in the DOM!
Each time the <style> element is updated, the page will jump to the element whose id is in the fragment.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, rhoncus et erat eu, imperdiet maximus nisi. Sed rhoncus, sapien ac fringilla vehicula, ante orci vestibulum ex, eu tristique elit diam at nibh. In eget lorem massa. Nunc vel ultrices augue. Phasellus gravida neque ac maximus lobortis. Nullam vitae auctor arcu. Fusce dictum feugiat elit, at dapibus nisl tempus eget. Suspendisse elementum justo in risus tempor vulputate. Nam in diam ac ante vehicula eleifend. Vivamus lacinia dictum risus nec ullamcorper. Integer enim sem, bibendum non leo in, fringilla rhoncus lacus. Sed tincidunt ac dui ut lobortis. Fusce id ullamcorper elit.
Etiam ut consequat felis, quis bibendum mi. Morbi tempor ex mi, vitae hendrerit mauris rhoncus facilisis. Proin condimentum semper nisi sed hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis eros vel congue interdum. Aliquam imperdiet risus sit amet orci imperdiet, vitae maximus sapien pharetra. Morbi elementum libero ipsum. Praesent sed diam eros. Proin rutrum porttitor velit sed molestie. Sed porttitor nec lectus in finibus.
Praesent id ante dolor. Mauris sem risus, mattis tristique eros ac, accumsan gravida sem. Quisque vitae blandit mi, vitae venenatis leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sed tortor eget eros sollicitudin viverra. Cras cursus sodales mollis. Mauris commodo eget eros et pellentesque. Quisque eu sapien ac eros lobortis maximus. Integer tellus risus, pellentesque sit amet sem vel, hendrerit pulvinar risus.
Donec facilisis dui at nunc varius, et efficitur lacus bibendum. Vestibulum commodo ipsum tellus, vitae consequat dolor tempus vitae. Vivamus sit amet pulvinar lorem. Nam vehicula egestas mi, eget finibus dolor commodo ut. Suspendisse accumsan lorem in ligula lacinia, suscipit sodales odio condimentum. Integer elementum maximus mollis. Donec condimentum aliquet enim, id hendrerit orci sollicitudin faucibus. Nam facilisis sagittis turpis in placerat. Ut sed dolor varius felis auctor finibus dapibus sit amet urna. Nulla a dapibus nisi. Vivamus ultrices, massa eu sagittis varius, leo arcu ullamcorper mauris, vel accumsan elit nisi pretium metus. Aliquam erat volutpat. Ut ultrices in ex ac scelerisque.
Cras semper, ligula ut congue auctor, justo nisi sodales libero, eget malesuada lorem urna at nisi. Suspendisse commodo congue eros, ut ultrices tortor rutrum eu. Vestibulum elementum arcu id elit lacinia, sed pharetra dui dapibus. In sed vulputate orci, et dignissim felis. Aliquam iaculis nibh non vulputate ultricies. Nullam sollicitudin facilisis accumsan. Donec elit nisl, venenatis a mauris sed, ultricies lacinia lorem.
Curabitur maximus bibendum lorem, non viverra elit fringilla ut. Praesent vestibulum metus justo. Donec dignissim nisl quis augue pulvinar, ac venenatis ipsum dictum. Duis eget sollicitudin tortor. Maecenas quis tempor massa. Vivamus ultricies metus eu velit ultrices rutrum. Suspendisse nec molestie ligula, eu mollis quam. Pellentesque tempor ut nibh ut pellentesque. Donec in arcu sed elit efficitur ultricies. Suspendisse sodales ipsum blandit, ultricies odio nec, pharetra metus. Mauris faucibus eros ut tortor vulputate, eget finibus dui placerat. Fusce quis luctus lacus, dignissim dapibus libero.
Aenean porttitor ante sit amet nisi molestie, et placerat purus sodales. Maecenas ut pellentesque urna, eget luctus purus. Nulla quis nibh non libero tristique mollis. Nam efficitur, purus eget interdum fringilla, purus turpis rutrum tellus, blandit lacinia lectus lacus non mi. In lacinia massa nec nisl convallis, et laoreet metus dignissim. In elementum, purus in efficitur fringilla, nisi quam molestie nulla, a faucibus leo elit at elit. Suspendisse potenti. Ut dignissim tristique sapien, quis varius justo sollicitudin semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis interdum, augue quis ornare pharetra, tortor ex pulvinar nulla, suscipit malesuada est felis non nisl. Nullam feugiat sagittis mollis. Ut efficitur eu justo ut sodales. Vivamus in libero et ex imperdiet euismod ac ac purus.
Quisque tempus mollis malesuada. Donec a turpis tellus. Aenean sagittis, turpis eu fermentum blandit, sapien lorem consectetur tortor, eget posuere velit est a diam. Phasellus pretium nisl ut nisl aliquet porta. Nullam non maximus nibh, euismod dignissim lectus. Fusce consequat dolor at fringilla rutrum. In hac habitasse platea dictumst. Nunc at nunc tempor, finibus est at, pretium risus.
Curabitur condimentum elementum dolor non placerat. In fermentum neque a diam tristique maximus. Etiam sollicitudin fringilla purus sed hendrerit. Phasellus in sapien eget ipsum gravida maximus. Ut non augue a erat scelerisque semper. Donec quis dui id enim congue dictum non vitae ligula. Proin id ligula nec enim consectetur mollis ut et arcu. Cras vehicula imperdiet pharetra. Curabitur sed consectetur nunc, tristique facilisis velit. In euismod gravida faucibus. Etiam quis urna aliquam, porttitor nunc et, pulvinar tortor. Aenean sit amet cursus felis. Phasellus faucibus tempus justo at congue.
Nulla consequat nisi in ligula interdum, sit amet vehicula velit tincidunt. Etiam bibendum sapien at sem bibendum, id accumsan metus finibus. Nullam feugiat cursus tortor ut vulputate. Nullam ac convallis est, at vulputate mauris. Etiam faucibus egestas turpis. Vivamus faucibus, risus nec commodo condimentum, sapien felis pretium sem, eu dapibus sapien enim non lectus. Aenean id dignissim diam, non elementum magna. Nunc luctus tincidunt ultricies. Integer porttitor vulputate massa, a faucibus nisi interdum sit amet.
Vivamus mauris felis, rhoncus at turpis non, posuere scelerisque dolor. Praesent mattis purus non nisi finibus dignissim. Sed at nibh eget magna feugiat tristique. Suspendisse sodales interdum nibh, et consectetur urna lacinia vitae. Nunc in nunc libero. Sed fringilla consectetur ex at laoreet. Quisque eu neque bibendum, finibus mauris non, suscipit felis.
Aenean fermentum porttitor pulvinar. Donec a tempus augue, quis consectetur lectus. Donec quis varius mauris, ut venenatis tellus. Nunc pellentesque vitae nulla efficitur gravida. Sed ac tristique lacus. Mauris venenatis lacus id est finibus, id laoreet magna sollicitudin. Sed vehicula velit eros, non imperdiet enim fringilla ac. Pellentesque eu diam pharetra, egestas lectus vel, dignissim enim. Maecenas lobortis quis ipsum a dictum. Suspendisse eu ultricies dolor, id pretium massa. Sed hendrerit sollicitudin nunc non blandit.
Nam nec laoreet ipsum. Praesent porttitor blandit est, in mollis ipsum mollis sit amet. Mauris sem purus, placerat nec urna nec, pretium commodo ipsum. Nunc efficitur ipsum et urna iaculis, ut facilisis diam gravida. Vivamus rhoncus malesuada justo eu tempor. Nulla molestie felis eget orci ullamcorper, ac aliquet sem scelerisque. Vivamus lobortis tortor ligula, vel aliquet risus semper quis.
Aenean consequat, lorem non gravida tempus, lectus sem scelerisque orci, sed egestas urna eros elementum felis. Duis posuere tincidunt blandit. Praesent non ullamcorper risus, vulputate efficitur justo. Sed ullamcorper fermentum fringilla. Quisque placerat mi metus, eu consequat felis interdum molestie. Fusce nec tempor elit. Pellentesque vel pulvinar massa, at malesuada ipsum. Mauris sed imperdiet dolor. Nulla efficitur quis justo sit amet tempor. Fusce eget dui nec purus auctor accumsan. Pellentesque ultricies convallis sagittis. Proin varius diam metus, venenatis auctor magna suscipit vel. Mauris at risus elementum, commodo diam quis, commodo velit.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a dolor eget dui convallis convallis sit amet eu ipsum. Donec aliquet, ipsum ullamcorper blandit pretium, erat erat elementum augue, quis finibus dui ante eu orci. Integer ultricies a dui in pretium. Donec vitae sapien quam. Nulla eleifend consectetur tincidunt. Sed in tellus a nulla blandit malesuada tincidunt eu metus. Mauris varius pellentesque dapibus. Sed aliquet eleifend dui quis bibendum. Donec non velit in sapien ultricies porttitor ut vel enim. Nam varius placerat lacus sed porttitor. Sed hendrerit elit mauris, vitae elementum mi imperdiet at. Vivamus vestibulum varius sodales. Praesent quis lectus sed nisl mollis pellentesque. Nullam auctor dolor dolor, in bibendum odio aliquet dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem urna, rhoncus et erat eu, imperdiet maximus nisi. Sed rhoncus, sapien ac fringilla vehicula, ante orci vestibulum ex, eu tristique elit diam at nibh. In eget lorem massa. Nunc vel ultrices augue. Phasellus gravida neque ac maximus lobortis. Nullam vitae auctor arcu. Fusce dictum feugiat elit, at dapibus nisl tempus eget. Suspendisse elementum justo in risus tempor vulputate. Nam in diam ac ante vehicula eleifend. Vivamus lacinia dictum risus nec ullamcorper. Integer enim sem, bibendum non leo in, fringilla rhoncus lacus. Sed tincidunt ac dui ut lobortis. Fusce id ullamcorper elit.
Etiam ut consequat felis, quis bibendum mi. Morbi tempor ex mi, vitae hendrerit mauris rhoncus facilisis. Proin condimentum semper nisi sed hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis eros vel congue interdum. Aliquam imperdiet risus sit amet orci imperdiet, vitae maximus sapien pharetra. Morbi elementum libero ipsum. Praesent sed diam eros. Proin rutrum porttitor velit sed molestie. Sed porttitor nec lectus in finibus.
Praesent id ante dolor. Mauris sem risus, mattis tristique eros ac, accumsan gravida sem. Quisque vitae blandit mi, vitae venenatis leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sed tortor eget eros sollicitudin viverra. Cras cursus sodales mollis. Mauris commodo eget eros et pellentesque. Quisque eu sapien ac eros lobortis maximus. Integer tellus risus, pellentesque sit amet sem vel, hendrerit pulvinar risus.
Donec facilisis dui at nunc varius, et efficitur lacus bibendum. Vestibulum commodo ipsum tellus, vitae consequat dolor tempus vitae. Vivamus sit amet pulvinar lorem. Nam vehicula egestas mi, eget finibus dolor commodo ut. Suspendisse accumsan lorem in ligula lacinia, suscipit sodales odio condimentum. Integer elementum maximus mollis. Donec condimentum aliquet enim, id hendrerit orci sollicitudin faucibus. Nam facilisis sagittis turpis in placerat. Ut sed dolor varius felis auctor finibus dapibus sit amet urna. Nulla a dapibus nisi. Vivamus ultrices, massa eu sagittis varius, leo arcu ullamcorper mauris, vel accumsan elit nisi pretium metus. Aliquam erat volutpat. Ut ultrices in ex ac scelerisque.
Cras semper, ligula ut congue auctor, justo nisi sodales libero, eget malesuada lorem urna at nisi. Suspendisse commodo congue eros, ut ultrices tortor rutrum eu. Vestibulum elementum arcu id elit lacinia, sed pharetra dui dapibus. In sed vulputate orci, et dignissim felis. Aliquam iaculis nibh non vulputate ultricies. Nullam sollicitudin facilisis accumsan. Donec elit nisl, venenatis a mauris sed, ultricies lacinia lorem.
Curabitur maximus bibendum lorem, non viverra elit fringilla ut. Praesent vestibulum metus justo. Donec dignissim nisl quis augue pulvinar, ac venenatis ipsum dictum. Duis eget sollicitudin tortor. Maecenas quis tempor massa. Vivamus ultricies metus eu velit ultrices rutrum. Suspendisse nec molestie ligula, eu mollis quam. Pellentesque tempor ut nibh ut pellentesque. Donec in arcu sed elit efficitur ultricies. Suspendisse sodales ipsum blandit, ultricies odio nec, pharetra metus. Mauris faucibus eros ut tortor vulputate, eget finibus dui placerat. Fusce quis luctus lacus, dignissim dapibus libero.
Aenean porttitor ante sit amet nisi molestie, et placerat purus sodales. Maecenas ut pellentesque urna, eget luctus purus. Nulla quis nibh non libero tristique mollis. Nam efficitur, purus eget interdum fringilla, purus turpis rutrum tellus, blandit lacinia lectus lacus non mi. In lacinia massa nec nisl convallis, et laoreet metus dignissim. In elementum, purus in efficitur fringilla, nisi quam molestie nulla, a faucibus leo elit at elit. Suspendisse potenti. Ut dignissim tristique sapien, quis varius justo sollicitudin semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis interdum, augue quis ornare pharetra, tortor ex pulvinar nulla, suscipit malesuada est felis non nisl. Nullam feugiat sagittis mollis. Ut efficitur eu justo ut sodales. Vivamus in libero et ex imperdiet euismod ac ac purus.
Quisque tempus mollis malesuada. Donec a turpis tellus. Aenean sagittis, turpis eu fermentum blandit, sapien lorem consectetur tortor, eget posuere velit est a diam. Phasellus pretium nisl ut nisl aliquet porta. Nullam non maximus nibh, euismod dignissim lectus. Fusce consequat dolor at fringilla rutrum. In hac habitasse platea dictumst. Nunc at nunc tempor, finibus est at, pretium risus.
Curabitur condimentum elementum dolor non placerat. In fermentum neque a diam tristique maximus. Etiam sollicitudin fringilla purus sed hendrerit. Phasellus in sapien eget ipsum gravida maximus. Ut non augue a erat scelerisque semper. Donec quis dui id enim congue dictum non vitae ligula. Proin id ligula nec enim consectetur mollis ut et arcu. Cras vehicula imperdiet pharetra. Curabitur sed consectetur nunc, tristique facilisis velit. In euismod gravida faucibus. Etiam quis urna aliquam, porttitor nunc et, pulvinar tortor. Aenean sit amet cursus felis. Phasellus faucibus tempus justo at congue.
Nulla consequat nisi in ligula interdum, sit amet vehicula velit tincidunt. Etiam bibendum sapien at sem bibendum, id accumsan metus finibus. Nullam feugiat cursus tortor ut vulputate. Nullam ac convallis est, at vulputate mauris. Etiam faucibus egestas turpis. Vivamus faucibus, risus nec commodo condimentum, sapien felis pretium sem, eu dapibus sapien enim non lectus. Aenean id dignissim diam, non elementum magna. Nunc luctus tincidunt ultricies. Integer porttitor vulputate massa, a faucibus nisi interdum sit amet.
Vivamus mauris felis, rhoncus at turpis non, posuere scelerisque dolor. Praesent mattis purus non nisi finibus dignissim. Sed at nibh eget magna feugiat tristique. Suspendisse sodales interdum nibh, et consectetur urna lacinia vitae. Nunc in nunc libero. Sed fringilla consectetur ex at laoreet. Quisque eu neque bibendum, finibus mauris non, suscipit felis.
Aenean fermentum porttitor pulvinar. Donec a tempus augue, quis consectetur lectus. Donec quis varius mauris, ut venenatis tellus. Nunc pellentesque vitae nulla efficitur gravida. Sed ac tristique lacus. Mauris venenatis lacus id est finibus, id laoreet magna sollicitudin. Sed vehicula velit eros, non imperdiet enim fringilla ac. Pellentesque eu diam pharetra, egestas lectus vel, dignissim enim. Maecenas lobortis quis ipsum a dictum. Suspendisse eu ultricies dolor, id pretium massa. Sed hendrerit sollicitudin nunc non blandit.
Nam nec laoreet ipsum. Praesent porttitor blandit est, in mollis ipsum mollis sit amet. Mauris sem purus, placerat nec urna nec, pretium commodo ipsum. Nunc efficitur ipsum et urna iaculis, ut facilisis diam gravida. Vivamus rhoncus malesuada justo eu tempor. Nulla molestie felis eget orci ullamcorper, ac aliquet sem scelerisque. Vivamus lobortis tortor ligula, vel aliquet risus semper quis.
Aenean consequat, lorem non gravida tempus, lectus sem scelerisque orci, sed egestas urna eros elementum felis. Duis posuere tincidunt blandit. Praesent non ullamcorper risus, vulputate efficitur justo. Sed ullamcorper fermentum fringilla. Quisque placerat mi metus, eu consequat felis interdum molestie. Fusce nec tempor elit. Pellentesque vel pulvinar massa, at malesuada ipsum. Mauris sed imperdiet dolor. Nulla efficitur quis justo sit amet tempor. Fusce eget dui nec purus auctor accumsan. Pellentesque ultricies convallis sagittis. Proin varius diam metus, venenatis auctor magna suscipit vel. Mauris at risus elementum, commodo diam quis, commodo velit.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a dolor eget dui convallis convallis sit amet eu ipsum. Donec aliquet, ipsum ullamcorper blandit pretium, erat erat elementum augue, quis finibus dui ante eu orci. Integer ultricies a dui in pretium. Donec vitae sapien quam. Nulla eleifend consectetur tincidunt. Sed in tellus a nulla blandit malesuada tincidunt eu metus. Mauris varius pellentesque dapibus. Sed aliquet eleifend dui quis bibendum. Donec non velit in sapien ultricies porttitor ut vel enim. Nam varius placerat lacus sed porttitor. Sed hendrerit elit mauris, vitae elementum mi imperdiet at. Vivamus vestibulum varius sodales. Praesent quis lectus sed nisl mollis pellentesque. Nullam auctor dolor dolor, in bibendum odio aliquet dictum.
!!FOO!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mollis ex et lorem finibus blandit. Quisque mollis est quis dignissim blandit. Vestibulum pulvinar bibendum justo, in vehicula magna faucibus ut. Aenean vitae faucibus ipsum. Donec quis sem feugiat, scelerisque risus ut, blandit metus. Mauris convallis ante lorem, id suscipit diam tincidunt posuere.
Donec a accumsan mi. In rhoncus, dui a suscipit interdum, sapien ex dictum ipsum, sed rutrum odio leo egestas massa. Aliquam fringilla lorem at convallis blandit. Praesent sit amet rutrum justo. Phasellus placerat mi blandit ante volutpat, ac bibendum ante venenatis. Sed mollis mollis enim, sed congue purus mattis nec. Pellentesque sem metus, congue ac turpis nec, blandit facilisis mauris. Curabitur vulputate metus at ex sodales molestie. Fusce accumsan efficitur quam, eget placerat mi fermentum a. Fusce auctor libero at mattis imperdiet. Ut non lacus ac velit hendrerit vestibulum.
Mauris feugiat, quam sit amet pellentesque consectetur, risus metus efficitur metus, venenatis elementum elit purus eget elit. Pellentesque volutpat sem ac diam fermentum cursus. Nullam nibh mauris, aliquet a massa ut, porta vehicula justo. Phasellus id tincidunt magna, a fringilla nunc. Pellentesque quis gravida quam. In quis mauris aliquam nunc iaculis eleifend sit amet a leo. Quisque iaculis ligula et leo volutpat, sit amet varius justo sagittis. In eu massa ex. Vestibulum vestibulum libero at arcu rhoncus, quis accumsan ipsum euismod. Ut fermentum egestas justo, eu lobortis lectus hendrerit nec. Phasellus vitae nunc ultrices, commodo nunc ac, lobortis nunc. Curabitur in mauris nec sem rutrum aliquet. Sed vel ligula ut ante aliquet luctus sed sed ligula. Proin ac efficitur odio, eget consectetur lacus. Mauris lobortis augue quam, nec posuere tortor lacinia non.
Nullam feugiat quis nibh ac faucibus. Proin quis enim velit. Nullam pulvinar, odio eget mollis mollis, mauris sem tincidunt ex, non cursus purus felis eget est. Morbi consequat molestie sollicitudin. Morbi id convallis ligula, in accumsan risus. Vestibulum posuere hendrerit ex quis ultricies. Morbi nec luctus elit. Curabitur accumsan turpis non fringilla ultrices. Donec hendrerit, dui ut interdum consectetur, dolor ex blandit mi, vel ultrices ex nunc at lectus. Fusce porttitor metus at blandit pulvinar. Praesent vestibulum, tortor sed lacinia ultrices, libero mauris ullamcorper tellus, vitae lobortis diam urna quis ligula. Vivamus tristique commodo est eget consequat. Pellentesque gravida hendrerit lectus, quis interdum massa egestas at.
Aliquam eu euismod enim. Nunc posuere egestas odio, at faucibus nisi fringilla vel. Integer eu dapibus enim. Fusce dapibus nulla nec justo dapibus, eu molestie dui convallis. In diam diam, tincidunt id hendrerit non, ullamcorper vel massa. Vestibulum consequat nulla eget mi lobortis ornare. Maecenas ullamcorper volutpat posuere. Aenean a consequat leo, eget commodo diam. Praesent pretium, metus sit amet maximus semper, ligula nisl suscipit mauris, a mattis orci velit in lorem. Nam ac ornare massa. In rutrum orci ac condimentum ultricies. Ut porttitor lectus id maximus egestas. Morbi interdum ornare sodales. Mauris congue consectetur est.