Плавная прокрутка для содержимого с абсолютным расположением

Question

Я использую этот Page scroller.js, чтобы обеспечить гладкий эффект прокрутки на моей странице. но это не сработает.

Проблема в том, что я нацелился на div, у которого была позиция: absolute ;. Мне все еще нужен этот 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 дивы имеют позицию абсолютного создать 3 макета столбца. Я добавил привязку к моему globalNav, чтобы при щелчке содержимое внутри #right div прокручивалось плавно.

heres my 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}); 
    });