$.locaScroll horizontal example

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<script src="http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js?1.3.4"></script>
<!-- 
more at 
http://demos.flesler.com/jquery/localScroll/#section1c

-->

<div id="links">
    <a href="#anchor1">RED</a>
    <a href="#anchor2">. YELLOW</a>
</div>
<div class="outer">
    <div class="nav">
        <div class="box b1" id="anchor1">
            
            <a href="#anchor2">1 Works</a>
            <br/>
            <a href="#anchor2"><span class="teste"><span class="a">2 Doesnt work</span></span></a>
            <br/>            
            <a href="#anchor2">3. a<span class="teste"><span class="a"> ---->  Works if you click on "3. a" text</span></span></a>
        </div>
        <div class="box b2" id="anchor2"></div>
    </div>
</div>

CSS

.outer{
    width:300px;
    height:250px;
    overflow:hidden;
    border: 1px solid #000;
        position:relative;
}
.nav{
    width:2000px;
    position:relative;
}
.nav > .box{
    width:300px;
    height:250px;
    float:left;
        position:relative;
}

.b1{background:red;}
.b2{background:yellow;}

JavaScript

$('#links, #anchor1').localScroll({
    target: '.outer',
    axis: 'x',
    duration:200,
    lazy: true,
    onBefore:function( e, anchor, $target ){
			// The 'this' is the settings object, can be modified
        console.log('event', e, 'anchor' , anchor, $target);
		},
		onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
            
            console.log(anchor, settings);
		}
})