CODEWITHSUNDEEP
htmlcsshyperlinkanchor
user3480337
user3480337

Reputation: 21

Clicking on anchor links moves whole page to top

So I have this webpage where the whole html's overflow is hidden

html {
 overflow: hidden;
}

and then I have a nav bar that has anchor links and a div that has the content which has an overflow auto, thus it's scrollable.

Nav:

<ul>
  <li><a href="#events">Events</a></li>
  <li><a href="#jazz">Jazz</a></li>
  <li><a href="#weddings">Weddings</a></li>
</ul>

Content div:

<div class="content">
  <div id="events">Events</div>
  // content
  <div id="jazz">Jazz</div>
  // content
  <div id="weddings">Weddings</div>
  // content
</div>

Now, my problem is when you click on a link on the nav, like for example jazz, the whole page just goes to the top, everything: the nav, the div content and obviously, the div shows the jazz section . Is there a way where everything just stays in place and the div content box just scrolls to a certain section?

Thanks!

Upvotes: 1

Views: 2700

Answers (4)

Maxim Hash
Maxim Hash

Reputation: 405

It's not pretty but might help you where you wanna get

http://jsfiddle.net/maximhash/8ts7qzj3/

<ul id="nav">
  <li><a href="#events">Events</a></li>
  <li><a href="#jazz">Jazz</a></li>
  <li><a href="#weddings">Weddings</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="content">
  <div id="events">Events</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  <div id="jazz">Jazz</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  <div id="weddings">Weddings</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>


#nav{
    position: fixed;
    top: 0;
    z-index: 999;
    background: orange;
}
.content{
    position: relative;
    top: 10px;
    overflow: auto;
    height: 500px;
    display: block;
}

Upvotes: 1

Max Liashuk
Max Liashuk

Reputation: 1053

Just make content overflow: scroll; In this case scroll works for conteiner and not for html.

.content{
    /* */   
    overflow: scroll;
}

Demo here http://jsfiddle.net/bvvhy6jj/

Upvotes: 2

retober
retober

Reputation: 366

I think as far as i understand you want your navigation staying fixed. So you have to set it 'fixed' :

ul {
   position:fixed;
}

Upvotes: 0

SRing
SRing

Reputation: 694

Given the information you provided I wasn't able to reproduce your issue. Or maybe I'm not understanding your question.

The following (which I built off your code) works the way you seem to want it to.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        html {overflow: hidden;}
        div#content {height: 1500px;}
        div#events {height: 500px;background-color: green;}
        div#jazz {height: 500px;background-color: red;}
        div#weddings {height: 500px;background-color: blue;}
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#events">Events</a></li>
      <li><a href="#jazz">Jazz</a></li>
      <li><a href="#weddings">Weddings</a></li>
    </ul>
    <div class="content">
      <div id="events">Events</div>
      // content
      <div id="jazz">Jazz</div>
      // content
      <div id="weddings">Weddings</div>
      // content
    </div>
  </body>
</html>

Do you intend to pin the Navigation at the top of the window even when the user scrolls to lower content? If so see this SMINT tutorial on how to build a one page site with a sticky navigation bar. And then buy him a coffee :)

Upvotes: 1

Related Questions