Question

我正在使用此Page scroller.js为我的页面提供平滑滚动效果。但它不会起作用。

问题是我的目标是具有位置的div：绝对;我仍然需要这个div有绝对的位置，并且还有平滑的滚动工作。

这是我的Html

<div id="wrapper">
<nav id="globalNav">
  <h1><a href="#"><img src="img/logo.png" alt="SHISEIDO" /></a></h1>
  <ul class="subMenu">
    <li><img src="img/seperator.png" alt=""></li>
    <li><a href="#works">TOP</a></li>
    <li><a href="#concept">CONCEPT</a></li>
    <li><a href="#contact">CONTACT</a></li>
    <li><img src="img/seperator.png" alt=""></li>
    <li><img src="img/seperator.png" alt=""></li>
    <li><p class="copyright">Copyright © KOOGEN 2015<br>All rights reserved.</p></li>
  </ul>
  <div id="fbFeed">
    <p></p>
  </div>
</nav>

<div class="col-sm-8" id="left">
  <div class="set">
  </div><!-- set -->
</div>

<div class="col-sm-4" id="right">
    <div id="inner1">
      <div id="works"></div>
      <div id="concept"></div>
      <div id="contact"></div> 
    </div><!-- inner -->
</div>


</div><!-- #wrapper -->

所以，＃left #right divs有绝对位置来创建3列布局。我添加了锚点链接到我的globalNav，这样当我点击时，＃right div内的内容将顺利滚动。

继承人我的css已加入#left和#right divs。

      #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 218px;
    width: 186px;
    overflow-y: scroll;
    background-color: rgba(255, 255, 255, 0.45);
    padding-left: 6px;
  }
 #left .set{
  padding-top: 230px;
 }
  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 67.5%;
  }
 #right #works{
  padding-top: 230px;
 }
 #right .inner{
  position: relative;
 }

任何帮助将不胜感激！谢谢你的时间！

更新：这是小提琴。 http://jsfiddle.net/hirohito/Ls3jwpm9/

当窗口的宽度非常窄时，它可以正常工作，但是当我将其拉伸到理想的窗口大小时，平滑的滚动停止工作。

Answer 1

您可以使用平滑滚动

    $(document).on('click', 'a[href^="#"]', function(e) {
        var id = $(this).attr('href');
        var $id = $(id);
        if ($id.size() === 0) {
        return;
        }
        e.preventDefault();
        var pos = $(id).offset().top;
        pos = pos-95;   
        $('body, html').animate({scrollTop: pos});
    });

平滑滚动绝对定位内容

1 个答案: