Smooth scrolling on a fixed positioned container

Question

I have been trying for hours to implement a smooth scroll on my project but it seems I can't make it work.

I have already detected where the problem is. If the container where the anchor tags are located is on fixed position or absolute, nothing I have tried works.

I have implement smooth scrooling with diferent jquerys libraries in past projects with no problem at all but it's the first time I MUST have the container on a fixed or absolute position.

the simplest library I have found is "smoothscroll.js" with the instructions here . (but I have tried many, and I find the same problem with all of them.

My Html (simplified as to make an example):

<div class="contenido">
    <a name="Castellana" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK1</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <a name="Florbaja" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK2</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />


    <a name="Staff" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK3</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

and my CSS:

.MenuSuperiorSeccion {    
    height:30px;
    background-color:rgba(220,220,220,0.9);
    position:fixed;
    top:30px;
    text-align:center;
    overflow:hidden; 
    text-align:left; 
    }
.MenuSuperiorSeccion ul {margin-top:5px;}    
.MenuSuperiorSeccion li {
    display:inline-block;
    text-transform:uppercase;
    margin-left:20px;    
    font-weight:300;
    } 
.MenuSuperiorSeccion li a {color:#666;}
.MenuSuperiorSeccion li a:hover {color:#fff; font-weight:400; line-height:0;}


.contenido {       
    background-color:aqua;
    position:fixed;
    bottom:90px;
    top:90px;
    width:400px;
    overflow:auto; 
    padding:20px; 
    text-align:left; 
    } 

and here you have the JSfiddle

As you can see while no js on play the anchor links works perfectly fine. If any of you could help me implementing a smooth scroll to those anchors I will forever gratefull. I'm desperate right atm.

Note: (often as soon as I try to make a library work, the anchors stop working)

Thanks and excuse my poor english

Edited: another example taken from an uncorrect answer below.

this works fine: http://jsfiddle.net/vdv9qko8/4/ (with jquery)

if I add to the container:

.fixed {
    position:fixed;
    top:120px;
    height:400px;
    overflow:auto;
}

It stop working: http://jsfiddle.net/vdv9qko8/3/

Answer 1

First of all, in the first fiddle you are trying to navigate the links with name , they should be replaced with id .

Secondly, in your last fiddle you are trying to animate the html and body tags instead of .fixed div.

Here's the solution for the 1st fiddle:

$("a").click(function(event){

    event.preventDefault();
    navto = $($(this).attr("href")).offset().top + $('.contenido').scrollTop() - 90;

    if($($(this).attr("href")).offset().top != 90){ //prevent scroll to current link
        $('.contenido').animate({
            scrollTop: navto
        }, 800
        );
    }

});

Live DEMO .

Solution to last fiddle .

Answer 2

You can use Jquery for this requirement:

    $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Hava a look at: DEMO