Site Com Rolagem Horizontal

Tenho um código de ancora animada utilizando o jquery, verticalmente ele funciona mais qdo coloco um flot:left com o css para que a barra de rolagem navegue de forma horizontal não funciona, queria saber se tem como utilizar esse código para fazer uma rolagem horizontal.

Os códigos são esses:

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mauro Laceda Ancora</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="anchor-animate.js"></script>
<script type="text/javascript" >
jQuery(function($){
        $('.classBtoTopo a').click(function () {
                        $('body,html').animate({
                                scrollTop: 0
                        }, 800);
                        return false;
                });
});


var animate = {
        'time': 500,
        'randMin': 1000,
        'randMax': 1200
};

</script>
<style>
#site{
        width:8430px;
}
#link1{
        width:1686px;
        float:left;
}
#link2{
        width:1686px;
        float:left;
}
#link3{
        width:1686px;
        float:left;
}
#link4{
        width:1686px;
        float:left;
}
#link5{
        width:1686px;
        float:left;
}
</style>

</head>
<body>
            <div><span>01 - </span><a href="#link1" class="animate rand">Clique aqui</a></div>
            <div><span>02 - </span><a href="#link2" class="animate rand">Clique aqui</a></div>
            <div><span>03 - </span><a href="#link3" class="animate rand">Clique aqui</a></div>
            <div><span>04 - </span><a href="#link4" class="animate rand">Clique aqui</a></div>
            <div><span>05 - </span><a href="#link5" class="animate rand">Clique aqui</a></div>
                        
                        
<div id="site">                 
            
<div id="link1">            
                                <h1><a name="link1" id="link1">Titulo 1 </a></h1>
                                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
                                nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                                                                <p>&nbsp;</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
</div>

<div id="link2">            
                                <h1><a name="link2" id="link2">Titulo 2</a></h1>
                                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
                                nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                                                                <p>&nbsp;</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
</div>

<div id="link3">            
                                <h1><a name="link3" id="link3">Titulo 3</a></h1>
                                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
                                nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                                                                <p>&nbsp;</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
</div>

<div id="link4">            
                                <h1><a name="link4" id="link4">Titulo 4</a></h1>
                                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
                                nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                                                                <p>&nbsp;</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
</div>

<div id="link5">            
                                <h1><a name="link5" id="link5">Titulo 5</a></h1>
                                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
                                nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                                                                <p>&nbsp;</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
                                esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                                qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta 
</div>




</div>
</body>
</html>

anchor-animate.js

(function($) {
        
        function rand(min, max) {
                return Math.floor((Math.random() * (max - min + 1)) + min);
        }
        
        var defaults = {
                'randMin': 100,
                'randMax': 2000,
                'time': 1000
        };
        
        $(function() {
                
                var settings = $.extend(defaults, animate); 

                $('.animate').click(function(e) {
                        e.preventDefault();

                        var obj = $(this);
                        var time = settings.time;

                        if(obj.hasClass('rand')) {

                                time = rand(settings.randMin, settings.randMax);

                        } else {

                                var result = /time[0-9]+/.exec(obj.attr('class'));
                                if(result)
                                        time = parseInt(new String(result).replace('time', ''));

                        }

                        $('html, body').animate({
                                scrollTop: $(obj.attr('href')).offset().top
                        }, time);

                });
        
        });


})(jQuery);

#1 wawasurf

0 user(s) are reading this topic

Site Com Rolagem Horizontal

#1 wawasurf

0 user(s) are reading this topic

Entrar