www.webdeveloper.com
Results 1 to 3 of 3

Thread: Multiple scrolling..

  1. #1
    Join Date
    Jan 2012
    Posts
    6

    Multiple scrolling..

    Hi I don't even know if this is possible but i'll put it out there..! I'm creating my portfolio website and i've decided to go for a horizontal scrolling theme. I've got the horizontal scrolling to work however, some sections are longer than others. Oh, and before I go on, i'm a complete newbie when it comes to coding!!!

    I want to know if it is possible to get the browser to scroll upwards and then scroll horizontally to the correct section. I've kind of go it to work whereby it jumps up to the top of the browser and scrolls horizontally, but i've not been able to implement a smooth vertical scroll.

    It might be easier for you to see what I mean: http://www.zabirvalliji.co.uk

    1. Go to 'portfolio' and scroll to the bottom.
    2. Go to any of the other sections.

    The page should jolt upwards then scroll horizontally.

    Here is my JS coding:

    Code:
    $(function(){
        $('a[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) {
                    var targetOffset = $target.offset().left;
                    $('html,body').animate({scrollLeft: targetOffset}, 1000);
    				$(window).scrollTop(0,0);
                    return false;
                }
            }
        });
    });

  2. #2
    Join Date
    Jan 2012
    Posts
    6
    anyone??

  3. #3
    Join Date
    Jan 2012
    Posts
    6
    cheers for your help guys, much appreciated!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles