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

Question

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.

you can use JQuery Libraries, use scrollTop function :) – John Rey M. Baylen Nov 05 '15 at 02:46 — John Rey M. Baylen, Nov 05 '15 at 02:46

Shikkediel · Accepted Answer · 2015-11-06T01:23:58.950

4

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...

edited Nov 06 '15 at 01:23

answered Nov 06 '15 at 01:05

Shikkediel

4,890
15
41
70

1

This solution works perfectly. The js was exactly what I was looking for. – badsyntax Nov 06 '15 at 01:33

score 0 · Answer 2 · answered Nov 05 '15 at 05:19

0

you can add position as fixed on top div element, i have checked your code on jsfiddle and added position style attribute in wrapper div element

<div class="wrapper" style="position:fixed; margin-top:10px">

answered Nov 05 '15 at 05:19

Madhusudan Nagar

71
3

score -1 · Answer 3 · edited May 23 '17 at 11:51

-1

just add this

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

this class to your body tag.

Reference: How to disable scrolling temporarily?

Updated Fiddle: http://jsfiddle.net/q8a1s5wj/2/

edited May 23 '17 at 11:51

Community

1
1

answered Nov 05 '15 at 04:13

Aatman

553
5
17

Thanks for the great response. Unfortunately this didn't work. It's my fault though I failed to recreate my problem accurately in the fiddle. You can see my problem here (http://fullclinch.com/survey-types.php) I will also re-write my question and code in my OP – badsyntax Nov 05 '15 at 19:53

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

3 Answers3