www.webdeveloper.com
Results 1 to 4 of 4

Thread: Smooth Scroll in Horizontal Portfolio Problem

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    Smooth Scroll in Horizontal Portfolio Problem

    Hi,

    I'm trying to build a new portfolio with a fixed position navigation on the left and then a horizontally scrolling div that you can also navigate by using the left menu. When an item is clicked I'd like it to smooth scroll to the corresponding anchor.

    You can see what I'm trying to achieve here by clicking on the categories below 'Design': http://maxjquinn.com/Portfolio/design.html

    I've removed all the javascript I've attempted from that page in order to have a clean slate as nothing seems to be working whatsoever.

    I've been trying to debug it and what seems to be the problem is that the navigation isn't in the same div that is actually scrolling. To test/demostrate this, I've downloaded the demo from the following tutorial and modified it:http://tympanus.net/codrops/2010/06/...g-with-jquery/

    If you have a look at my modified version (with my nav overlaid) below, you'll see that the links from the original tutorial work fine and it scrolls smoothly. However, if you try using the links from my nav bar (xoyo, the nest, and music correspond to section 1, 2 and 3 respectively) you'll see that it just jumps to the pages rather than scrolling.

    http://www.maxjquinn.com/Portfolio/test/index.html

    Can anyone help me with some javascript code that allows me to utilize the smooth scrolling with my layout?

    Thanks very much in advance!

    Max.

  2. #2
    Join Date
    Oct 2013
    Posts
    3
    Can anyone help me out at all? Thanks!

  3. #3
    Join Date
    Oct 2013
    Location
    Boston, MA
    Posts
    13
    It looks like you haven't bound the animation functionality to the side nav.

    In your page you only have
    Code:
    $('ul.nav a').bind('click',function(event){ /* ... */ }
    In order to attach it to the side Navs you would also need
    Code:
    $('div.secondLinks a').bind('click',function(event){ /* ... */ }

  4. #4
    Join Date
    Oct 2013
    Posts
    3
    Quote Originally Posted by haggy() View Post
    Snip
    That's it! Thanks very much Haggy, too late to fully integrate it now but I just got the test version working so can implement myself from there.

    Typical that it ends up being something so simply. Cheers again!

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