How to use anchor links to scroll within a div without scrolling the main page


Tags: javascript,jquery,html,css,scroll

Problem :

I am trying to use links to scroll the content within a div. HTML is here:

<header>
  <div class="wrapper">
    <a href="#" class="logo"><img src="/img/header.jpg" alt="Ace Land Surveying"></a>
  </div>
  <nav>
    <div class="wrapper">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Types of Surveys</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Links</a></li>
        <li><a href="">Request a Survey</a></li>
        <li><a href="">Past Projects</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="" class="last">SOQ</a></li>
      </ul>
    </div>
  </nav>
</header>
<div class="wrapper">
  <div class="content">
    <div class="column left">
      <ul class="survey-type-list">
        <li><h2><a href="#type1">CLICK HERE</a></h2></li>
        <li><h2><a href="#type2">CLICK HERE</a></h2></li>
        <li><h2><a href="#type3">CLICK HERE</a></h2></li>
      </ul>
    </div>
    <div class="column right" id="survey-column">
      <div class="survey-type" id="type1">
        <p> ... long text ... </p>
      </div>
      <div class="survey-type" id="type2">
        <p> ... long text ... </p>
      </div>
      <div class="survey-type" id="type3">
        <p> ... long text ... </p>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="footer-top">
    <div class="wrapper"></div>
  </div>
</footer>

and the CSS:

header {
  float: left;
  width: 100%;
  height: 200px;
}

.wrapper {
  width: 90%;
  margin: auto;
}

.content {
  float: left;
  width: 100%;
  padding: 20px;
  background: #02274b;
}

.column {
  min-height: 500px;
  padding: 20px;
  border-radius: 20px;
  color: #fff;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}

.column.left {
  float: left;
  width: 20%;
}

.column.right {
  float: right;
  width: 60%;
}

.survey-type-list li {
  margin: 0 0 4px 0;
  list-style: none;
}

.survey-type-list h2 {
  font-size: 13px;
}

#survey-column {
  overflow: hidden;
  height: 460px;
}

.survey-type {
  float: left;
  width: 100%;
  height: 460px;
}

The problem is that the entire page moves with the content inside the div.

Here is a fiddle:

http://jsfiddle.net/q8a1s5wj/8/

I tried several other threads here but none could solve my problem.

How can I prevent the whole page from scrolling and just scroll inside the right column with my anchor links?

I want to be able to click the link in the left column and see the right column scroll but not the move the entire page.



Solution :

Fiddle

Some minor adaptations to the CSS - not doing this gave the wrong element offset :

#survey-column {
  position: relative;
}

This one's just so the last div can scroll to the top completely :

.survey-type {
  height: 520px;
}

And a bit of script to make it work :

$(function() {

$('.column.left a').click(function() {

    var goal = $(this.hash).position().top-20,
    aim = goal+$('#survey-column').scrollTop();

    $('#survey-column').scrollTop(aim);

    return false;
});
});

The 20 pixels deduction of goal is just done to keep the same top padding as was started with...


    CSS Howto..

    How can I get images floated to the left of other definition list elements?

    How to extend background CSS styling indefinitely along the x-axis?

    how to ignore rewriting css file with .htaccess

    How to do fallback for browser-specific css expressions

    How to set two floated divs to be the 100% height of the page

    How to create a scrollable Div Tag Vertically?

    How do I apply css code for svg in google api charts

    How to cut off text that is longer than the space available and show '…'?

    How to copy a CSS style from a website for re-use

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How to override bootstrap styles?

    How to perform media queries if either statements are correct?

    Navigation Menu That Shows/Hides On Rollover and Click

    How to best make a hover navbar?

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    jQuery How do i apply CSS to selected text

    How to link a css file with the Slim templating engine?

    How can I use the HTML data attribute in CSS as a property? [duplicate]

    How to make a HTML spinner with CSS

    How to target the first-child of an optgroup with css or jquery

    How to implement min left/right in css

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to return a javascript set style property to CSS default

    ExtJS how to set button css by using pressedCls config

    Tab menu in CSS - how to set an active tab

    How to COLOR lower-roman ordered list style in html with just css?

    How do I change the function of a button when the window size changes?

    How to set a td floating left in chrome?

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    disabling stylesheets to increase the speed of showing/hiding divs