如何使用錨鏈接在 div 內滾動而不滾動主頁

Question

我正在嘗試使用鏈接在div滾動內容。 HTML在這里：

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

和 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;
}

問題是整個頁面隨着div內的內容移動。

這是一個小提琴：

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

我在這里嘗試了其他幾個線程，但沒有一個可以解決我的問題。

我怎樣才能防止整個頁面滾動，而只是使用我的錨鏈接在右列內滾動？

我希望能夠單擊左列中的鏈接並查看右列滾動，但不能移動整個頁面。

Answer 1

小提琴

對 CSS 的一些小改動 - 不這樣做會導致錯誤的元素偏移：

#survey-column {
  position: relative;
}

這只是為了讓最后一個div可以完全滾動到頂部：

.survey-type {
  height: 520px;
}

以及一些使其工作的腳本：

$(function() {

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

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

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

    return false;
});
});

goal的 20 像素扣除只是為了保持與開始時相同的頂部填充...

Answer 2

您可以在頂部 div 元素上添加固定位置，我已經在 jsfiddle 上檢查了您的代碼並在包裝器 div 元素中添加了位置樣式屬性

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

Answer 3

只需添加這個

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

這個類到你的身體標簽。

參考： 如何暫時禁用滾動？

更新小提琴： http : //jsfiddle.net/q8a1s5wj/2/