does not work I have the following built-in iframe
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=stylesheet href=../../css/main.css><link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><script>window.jQuery||document.write('<script src="../../js/vendors/jquery-3.3.1.min.js"><\/script>')</script><script>document.write('<script src="//pagea'+'d2.googles'+'yndication.com/pagea'+'d/js/a'+'dsby'+'google.js"><\/script>')</script><script>var superSpecialObject={};superSpecialObject['google_a'+'d_client']='ca-p'+'ub-4469282388984999';superSpecialObject['enable_page_level_a'+'ds']=true;(window['a'+'dsbygoogle']=window['a'+'dsbygoogle']||[]).push(superSpecialObject);</script><header class="page-header js-page-header"><a class=page-header-logo-container href=https://geek-answers.imtqy.com/index.html></a><div class=page-header-text>Geek Answers Handbook</div></header><section class="page js-page"><div itemscope itemtype=http://schema.org/QAPage class=page><div class=main-col itemprop=mainEntity itemscope itemtype=http://schema.org/Question><div class=question-header><h1 itemprop=name><iframe src = "reallylongpage.html # bottom" / "> does not work</h1></div><div class=question><div class=question-row><div class=question-text><div class=description itemprop=text><p>I have the following built-in iframe<pre class=prettyprint-override><code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>width</span>=<span class=hljs-string>"100%"</span> <span class=hljs-attr>height</span>=<span class=hljs-string>"400"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"reallylongpage.html"</span> /></span></code> </pre><p>reallongpage.html has 2 #top and #bottom bindings<p>I want my iframe to load reallylongpage.html at the bottom of the page so I do<pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>width</span>=<span class=hljs-string>"100%"</span> <span class=hljs-attr>height</span>=<span class=hljs-string>"400"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"reallylongpage.html#bottom"</span> /></span></code> </pre><p>But this has an undesirable scroll effect like iframe AND of the parent page. The parent page should not scroll at all. This happens in Chrome and Firefox.<p><br>here is an example with full code<p>parent.html<pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span> <span class=hljs-attr>style</span>=<span class=hljs-string>"padding:100 200;"</span>></span> <span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>WIDTH</span>=<span class=hljs-string>"100%"</span> <span class=hljs-attr>HEIGHT</span>=<span class=hljs-string>"400"</span> <span class=hljs-attr>SRC</span>=<span class=hljs-string>"CHILD.HTML#BOTTOM"</span> ></span><span class=hljs-tag></<span class=hljs-name>iframe</span>></span> <span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span>></span>1<span class=hljs-tag><<span class=hljs-name>br</span>></span>2<span class=hljs-tag><<span class=hljs-name>br</span>></span>3<span class=hljs-tag><<span class=hljs-name>br</span>></span>4<span class=hljs-tag><<span class=hljs-name>br</span>></span>5<span class=hljs-tag><<span class=hljs-name>br</span>></span>6<span class=hljs-tag><<span class=hljs-name>br</span>></span>7<span class=hljs-tag><<span class=hljs-name>br</span>></span>8<span class=hljs-tag><<span class=hljs-name>br</span>></span>9<span class=hljs-tag><<span class=hljs-name>br</span>></span>10<span class=hljs-tag><<span class=hljs-name>br</span>></span>11<span class=hljs-tag><<span class=hljs-name>br</span>></span>12<span class=hljs-tag><<span class=hljs-name>br</span>></span>13<span class=hljs-tag><<span class=hljs-name>br</span>></span>14<span class=hljs-tag><<span class=hljs-name>br</span>></span>15<span class=hljs-tag><<span class=hljs-name>br</span>></span>16<span class=hljs-tag><<span class=hljs-name>br</span>></span>17<span class=hljs-tag><<span class=hljs-name>br</span>></span>18<span class=hljs-tag><<span class=hljs-name>br</span>></span>19<span class=hljs-tag><<span class=hljs-name>br</span>></span>20<span class=hljs-tag><<span class=hljs-name>br</span>></span>21<span class=hljs-tag><<span class=hljs-name>br</span>></span>22<span class=hljs-tag><<span class=hljs-name>br</span>></span>23<span class=hljs-tag><<span class=hljs-name>br</span>></span>24<span class=hljs-tag><<span class=hljs-name>br</span>></span>25<span class=hljs-tag><<span class=hljs-name>br</span>></span>26<span class=hljs-tag><<span class=hljs-name>br</span>></span>27<span class=hljs-tag><<span class=hljs-name>br</span>></span>28<span class=hljs-tag><<span class=hljs-name>br</span>></span>29<span class=hljs-tag><<span class=hljs-name>br</span>></span>30<span class=hljs-tag><<span class=hljs-name>br</span>></span><span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span></code> </pre><p>child.html<pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>name</span>=<span class=hljs-string>"top"</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"#bottom"</span>></span>go to bottom<span class=hljs-tag></<span class=hljs-name>a</span>></span><span class=hljs-tag><<span class=hljs-name>br</span>></span> 1<span class=hljs-tag><<span class=hljs-name>br</span>></span>2<span class=hljs-tag><<span class=hljs-name>br</span>></span>3<span class=hljs-tag><<span class=hljs-name>br</span>></span>4<span class=hljs-tag><<span class=hljs-name>br</span>></span>5<span class=hljs-tag><<span class=hljs-name>br</span>></span>6<span class=hljs-tag><<span class=hljs-name>br</span>></span>7<span class=hljs-tag><<span class=hljs-name>br</span>></span>8<span class=hljs-tag><<span class=hljs-name>br</span>></span>9<span class=hljs-tag><<span class=hljs-name>br</span>></span>10<span class=hljs-tag><<span class=hljs-name>br</span>></span>11<span class=hljs-tag><<span class=hljs-name>br</span>></span>12<span class=hljs-tag><<span class=hljs-name>br</span>></span>13<span class=hljs-tag><<span class=hljs-name>br</span>></span>14<span class=hljs-tag><<span class=hljs-name>br</span>></span>15<span class=hljs-tag><<span class=hljs-name>br</span>></span>16<span class=hljs-tag><<span class=hljs-name>br</span>></span>17<span class=hljs-tag><<span class=hljs-name>br</span>></span>18<span class=hljs-tag><<span class=hljs-name>br</span>></span>19<span class=hljs-tag><<span class=hljs-name>br</span>></span>20<span class=hljs-tag><<span class=hljs-name>br</span>></span>21<span class=hljs-tag><<span class=hljs-name>br</span>></span>22<span class=hljs-tag><<span class=hljs-name>br</span>></span>23<span class=hljs-tag><<span class=hljs-name>br</span>></span>24<span class=hljs-tag><<span class=hljs-name>br</span>></span>25<span class=hljs-tag><<span class=hljs-name>br</span>></span>26<span class=hljs-tag><<span class=hljs-name>br</span>></span>27<span class=hljs-tag><<span class=hljs-name>br</span>></span>28<span class=hljs-tag><<span class=hljs-name>br</span>></span>29<span class=hljs-tag><<span class=hljs-name>br</span>></span>30<span class=hljs-tag><<span class=hljs-name>br</span>></span> <span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>name</span>=<span class=hljs-string>"bottom"</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"#top"</span>></span>go to top<span class=hljs-tag></<span class=hljs-name>a</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span></code> </pre><p>here is what i want it to look <a href rel="nofollow noreferrer">right http://i38.tinypic.com/2gxh1f6.png</a><p>this is what i get instead <a href rel="nofollow noreferrer">incorrect http://i33.tinypic.com/2gy0t1x.png</a></div><div class="favorite hidden"><i class="far fa-star"></i></div><div class=votes-question><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+4</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=tags><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'jquery'" rel=tag>jquery</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'html'" rel=tag>html</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'anchor'" rel=tag>anchor</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'iframe'" rel=tag>iframe</a></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>kenwarner</a></span></span> <time title="2010-08-05 20:54" itemprop=dateCreated datetime=2010-08-05T20:54:17+0000>Aug 05 '10 at 20:54</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=2 data-overlay=false></ins><div class=answers id=answers_hash><div class=answers-header><span class=pull-left><span itemprop=answerCount>2</span> answers</span><div class=clearfix></div></div><div class="answer-pager hidden"></div><div class="answer accepted" id=4171457_hash itemscope itemtype=http://schema.org/Answer itemprop=acceptedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>This is apparently the de facto behavior in browsers (at least I couldn't find any written standard about anchors and scrolling).<p>The browser tries to scroll through all the windows until the desired fragment appears. (You will notice this even if you click the “get to the top” link and also add “padding-bottom: 3000px;” to the div in your example.)<p>Consider using the <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>jQuery scrollTo plugin</a> , which actually manipulates the scroll positions of the corresponding container for you.<p>To demonstrate your example:<h2>Hosted Demos:</h2><p><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>Using jQuery scrollTo</a><p><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>Without jQuery scrollTo</a><h2>Full source code:</h2><h3>parent.html</h3><pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-meta><!doctype html></span> <span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>title</span>></span>parent<span class=hljs-tag></<span class=hljs-name>title</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"http://code.jquery.com/jquery-1.4.2.min.js"</span>></span><span class=undefined></span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"jquery.scrollTo-min.js"</span>></span><span class=undefined></span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span>></span><span class=javascript> $(<span class=hljs-function><span class=hljs-keyword>function</span>(<span class=hljs-params></span>)</span>{ <span class=hljs-keyword>var</span> iframe = $(<span class=hljs-string>'iframe'</span>); iframe.load(<span class=hljs-function><span class=hljs-keyword>function</span>(<span class=hljs-params></span>)</span>{ iframe.scrollTo(<span class=hljs-string>'a[name=bottom]'</span>); }); }); </span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag></<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span> <span class=hljs-attr>style</span>=<span class=hljs-string>"padding:100px 200px 3000px;"</span>></span> <span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>width</span>=<span class=hljs-string>"100%"</span> <span class=hljs-attr>height</span>=<span class=hljs-string>"400"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"child.html"</span>></span><span class=hljs-tag></<span class=hljs-name>iframe</span>></span> <span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span>></span>1<span class=hljs-tag><<span class=hljs-name>br</span>></span>2<span class=hljs-tag><<span class=hljs-name>br</span>></span>3<span class=hljs-tag><<span class=hljs-name>br</span>></span>4<span class=hljs-tag><<span class=hljs-name>br</span>></span>5<span class=hljs-tag><<span class=hljs-name>br</span>></span>6<span class=hljs-tag><<span class=hljs-name>br</span>></span>7<span class=hljs-tag><<span class=hljs-name>br</span>></span>8<span class=hljs-tag><<span class=hljs-name>br</span>></span>9<span class=hljs-tag><<span class=hljs-name>br</span>></span>10<span class=hljs-tag><<span class=hljs-name>br</span>></span>11<span class=hljs-tag><<span class=hljs-name>br</span>></span>12<span class=hljs-tag><<span class=hljs-name>br</span>></span>13<span class=hljs-tag><<span class=hljs-name>br</span>></span>14<span class=hljs-tag><<span class=hljs-name>br</span>></span>15<span class=hljs-tag><<span class=hljs-name>br</span>></span>16<span class=hljs-tag><<span class=hljs-name>br</span>></span>17<span class=hljs-tag><<span class=hljs-name>br</span>></span>18<span class=hljs-tag><<span class=hljs-name>br</span>></span>19<span class=hljs-tag><<span class=hljs-name>br</span>></span>20<span class=hljs-tag><<span class=hljs-name>br</span>></span>21<span class=hljs-tag><<span class=hljs-name>br</span>></span>22<span class=hljs-tag><<span class=hljs-name>br</span>></span>23<span class=hljs-tag><<span class=hljs-name>br</span>></span>24<span class=hljs-tag><<span class=hljs-name>br</span>></span>25<span class=hljs-tag><<span class=hljs-name>br</span>></span>26<span class=hljs-tag><<span class=hljs-name>br</span>></span>27<span class=hljs-tag><<span class=hljs-name>br</span>></span>28<span class=hljs-tag><<span class=hljs-name>br</span>></span>29<span class=hljs-tag><<span class=hljs-name>br</span>></span>30<span class=hljs-tag><<span class=hljs-name>br</span>></span><span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span></code> </pre><h3>child.html</h3><pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-meta><!doctype html></span> <span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>title</span>></span>child<span class=hljs-tag></<span class=hljs-name>title</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"http://code.jquery.com/jquery-1.4.2.min.js"</span>></span><span class=undefined></span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"jquery.scrollTo-min.js"</span>></span><span class=undefined></span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"text/javascript"</span>></span><span class=javascript> $(<span class=hljs-function><span class=hljs-keyword>function</span>(<span class=hljs-params></span>)</span>{ $(<span class=hljs-string>'a'</span>).click(<span class=hljs-function><span class=hljs-keyword>function</span>(<span class=hljs-params></span>)</span>{ $(<span class=hljs-built_in>window</span>).scrollTo(<span class=hljs-string>'a[name='</span> + <span class=hljs-keyword>this</span>.hash.substring(<span class=hljs-number>1</span>) + <span class=hljs-string>']'</span>); <span class=hljs-keyword>return</span> <span class=hljs-literal>false</span>; }); }); </span><span class=hljs-tag></<span class=hljs-name>script</span>></span> <span class=hljs-tag></<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>name</span>=<span class=hljs-string>"top"</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"#bottom"</span>></span>go to bottom<span class=hljs-tag></<span class=hljs-name>a</span>></span><span class=hljs-tag><<span class=hljs-name>br</span>></span> 1<span class=hljs-tag><<span class=hljs-name>br</span>></span>2<span class=hljs-tag><<span class=hljs-name>br</span>></span>3<span class=hljs-tag><<span class=hljs-name>br</span>></span>4<span class=hljs-tag><<span class=hljs-name>br</span>></span>5<span class=hljs-tag><<span class=hljs-name>br</span>></span>6<span class=hljs-tag><<span class=hljs-name>br</span>></span>7<span class=hljs-tag><<span class=hljs-name>br</span>></span>8<span class=hljs-tag><<span class=hljs-name>br</span>></span>9<span class=hljs-tag><<span class=hljs-name>br</span>></span>10<span class=hljs-tag><<span class=hljs-name>br</span>></span>11<span class=hljs-tag><<span class=hljs-name>br</span>></span>12<span class=hljs-tag><<span class=hljs-name>br</span>></span>13<span class=hljs-tag><<span class=hljs-name>br</span>></span>14<span class=hljs-tag><<span class=hljs-name>br</span>></span>15<span class=hljs-tag><<span class=hljs-name>br</span>></span>16<span class=hljs-tag><<span class=hljs-name>br</span>></span>17<span class=hljs-tag><<span class=hljs-name>br</span>></span>18<span class=hljs-tag><<span class=hljs-name>br</span>></span>19<span class=hljs-tag><<span class=hljs-name>br</span>></span>20<span class=hljs-tag><<span class=hljs-name>br</span>></span>21<span class=hljs-tag><<span class=hljs-name>br</span>></span>22<span class=hljs-tag><<span class=hljs-name>br</span>></span>23<span class=hljs-tag><<span class=hljs-name>br</span>></span>24<span class=hljs-tag><<span class=hljs-name>br</span>></span>25<span class=hljs-tag><<span class=hljs-name>br</span>></span>26<span class=hljs-tag><<span class=hljs-name>br</span>></span>27<span class=hljs-tag><<span class=hljs-name>br</span>></span>28<span class=hljs-tag><<span class=hljs-name>br</span>></span>29<span class=hljs-tag><<span class=hljs-name>br</span>></span>30<span class=hljs-tag><<span class=hljs-name>br</span>></span> <span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>name</span>=<span class=hljs-string>"bottom"</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"#top"</span>></span>go to top<span class=hljs-tag></<span class=hljs-name>a</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span></code> </pre></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+2</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>brianpeiris</a></span></span> <time title="2010-08-07 04:34" itemprop=dateCreated datetime=2010-08-07T04:34:59+0000>Aug 7 '10 at 4:34</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block;margin-top:15px data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=3 data-overlay=false></ins><div class="answer last rltd" id=4171458_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Well, it's just a confusing browser. I took a quick look and found out that your <code>name="bottom"</code> has nothing beyond. Since the browser needs to focus on this element and place it at the top of the window, it did not find anything inside the iframe, which can scroll <code>#bottom</code> to the top, so it scrolls the parent element, but only to bring <code>#buttom</code> up.<p>I installed the page with your code here <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>http://jsfiddle.net/VGN2k/</a> to explain what I am saying. check this<p>What I did was add a beam <code><br/></code> after "#bottom" to create a space, now the browser has a space that it can use to bring <code>#bottom</code> at the top.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Starx</a></span></span> <time title="2010-08-07 04:52" itemprop=dateCreated datetime=2010-08-07T04:52:32+0000>Aug 7 '10 at 4:52</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer-pager hidden"></div></div></div></div><section class="more-articles-navigation-panel js-more-articles-navigation-panel"><h4>More articles:</h4><nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages"><li><a href=../1318086/index.html>Validating the built-in client side with MVC and jQuery - jquery-validate</a><li><a href=../1318087/index.html>jquery.validate is lost when replacing ajax and shows only the last error - jquery-validate</a><li><a href=../1318088/index.html>float union: completely crazy output - c ++</a><li><a href=../1318089/index.html>C # derived classes, overload resolution - c #</a><li><a href=../1318090/index.html>Interface inheritance and casting - inheritance</a><li><a href=../1318092/index.html>Flash Zoom Quality - flash</a><li><a href=../1318093/index.html>DataServiceContext.Timeout The unit of time is .net</a><li><a href=../1318094/index.html>How to calculate the direction of rotation - c #</a><li><a href=../1318095/index.html>Password change: best practice - security</a><li><a href=../1318096/index.html>Dynamic Content and SEO: Create 2 Separate Pages? - ajax</a></ul></nav></section><br><a href=../../allArticles.html><strong>All Articles</strong></a> <script src=../../js/main.js></script><script>(function(d,w,c){(w[c]=w[c]||[]).push(function(){try{w.yaCounter62683636=new Ya.Metrika({id:62683636,clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});}catch(e){}});var n=d.getElementsByTagName("script")[0],s=d.createElement("script"),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.src="https://mc.yandex.ru/metrika/watch.js";if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"yandex_metrika_callbacks");</script><noscript><div><img src=https://mc.yandex.ru/watch/62683636 style=position:absolute;left:-9999px alt></div></noscript><script>window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;ga('create','UA-166339405-1','auto');ga('send','pageview')</script><script src=https://www.google-analytics.com/analytics.js async defer></script></section><footer class=page-footer><div class="page-footer-legal-info-container page-footer-element"><p>Geek Answers | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span></div><div class="page-footer-counters-container page-footer-element"><a class=page-footer-counter-clustrmap href=# title="Visit tracker"><img src="https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=IDRwb302jFsed82JlnSkxjeQ3C5_AObCmGX74jggris&co=3a3a3a&ct=ffffff"></a></div></footer>