Page scrolled down to bottom of page after refresh, how do I fix that?

Question

I am doing a HTML Basics and working on the "Linking to Sections of a Web Page" but whenever I refresh it automatically scrolls my page down to the bottom of the page. Here is my code:

<!DOCTYPE html> <html> <header> <title>Experience VR</title> </header> <body> <div>

<header id="home">
  <h1>Experience VR</h1>
<p> A simple blog about virtual reality experiences</p>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#articles">Articles</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>

<div>
  <img src="img/featured.jpg" alt="Virtual reality user">

<p> Virtual Reality is becoming well know as a form of entertainment but its also finding its way into fields like education, industrial design, healthcare and so much more</p> <a href="https://teamtreehouse.com/vr" target="_blank">Start Your VR Journey</a> </div>

<main>
<section id="about">
  <h2>About this site</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula metus in bibendum laoreet. Aenean libero est, egestas eu eros pretium, sodales iaculis est.</p>
  <figure>
  <img src="img/vr-space.jpg" alt="User experiencing space in Vr">
    <figcaption>
    Virtual reality users can explore faraway places and feel as though they are right in the middle of the action
    </figcaption>
  </figure>
</section>

<section id="articles"> <h2>Latest VR Articles</h2>

      <article>
        <header>
        <h3>How Schools Use Virtual Reality to Improve Education</h3>
          <p>By Kevin Tran</p>
          </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi.</p>
        <a href="articles/2017/article.html#vr-article">Read More</a>
        <footer>Published: October 24, 2018</footer>
      </article>

      <article>
        <header>
          <h3>The Advantages of VR Simulation</h3>
          <p>By Kevin Tran</p>
        </header>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi.</p>
         <a href="articles/2017/article.html#vr-article">Read More</a>
        <footer>Published: October 24, 2018</footer>
      </article>
</section>

<section id="contact"> <h2>Contact</h2> <p><strong>Email:</strong> coolvrexperience@gmail.com</p> <p><strong>Phone:</strong> 555-123-4567</p> <p><strong>Address:</strong></p> <address> Experiece VR<br> 2017 Virtual Way<br> City, State 33437 </address>

</section>
</main>


<aside>
<h3>Top VR Resources</h3>

<ol>
  <li>Learn to create educational experiences in VR</li>
  <li>Virtual Reality in Entertainment</li>
  <li>Interact with buildings and products in VR</li>
  <li>Use VR for teleconferencing and social media</li>
</ol>

  <hr>

<blockquote>
"Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
  <footer>
  - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971" target="_blank">Mark Zuckerberg</a></cite>
  </footer>
</blockquote>

</aside>


<footer>
  <p><small>&copy; 2017 Experience VR, The Blog</small></p>
</footer>

</div> </body> </html>

Answer 1 · 2018-10-25T19:13:40Z

October 25, 2018 7:13pm

Hmm, I copied your code, and tested it out on my computer. I don't see anything that would cause it to scroll down to the bottom as far as the HTML code. It might be the browser/workspace misbehaving ?

Welcome to the Treehouse Community

Looking to learn something new?

Kevin Tran

Kevin Tran

Page scrolled down to bottom of page after refresh, how do I fix that?

1 Answer

Chung Kang

Chung Kang

Kevin Tran

Kevin Tran