SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smooth scroll with & without javascript

    I want to get a fancy scroll to function even when JavaScript is not enabled in your browser. http://gravitysign.com/fancyscroll/horizontal#/ So if you press on the links so you end up at the correct position without animation.

    javascript:
    Code:
    window.onload = function(){    
       var fs=new fancyScroll({easingFunc: 'easeOutCubic',              
            easingTime: 1000,              
            deepLinking: true,              
            scrollMode: 'horizontal',              
            goTopText: 'Return'});  
       fs.addScroll(['sale','discount','new','contact']);    
    };
    HTML Code:
    <a href="#/sale">Sale</a> 
    <a href="#/discount">Discount</a> 
    <a href="#/new">New</a> 
    <a href="#/contact">Contact us</a>
    An example of one that works with & without javascript but not something I want to use:
    tympanus.net/Tutorials/WebsiteScrolling/

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lantiqo View Post
    I want to get a fancy scroll to function even when JavaScript is not enabled in your browser. http://gravitysign.com/fancyscroll/horizontal#/ So if you press on the links so you end up at the correct position without animation.
    In the case that script is not available, no script of that type should require a page to be configured to prevent default navigation. Try evaluating http://scripterlative.com/files/softscroll.htm

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hi lantiqo. Welcome to the forums.

    Quote Originally Posted by lantiqo View Post
    I want to get a fancy scroll to function even when JavaScript is not enabled in your browser.
    There is a simple error in your code which is stopping this from happening. All you need to do is change this:
    Code:
    <ul> 
       <li><a id="sale_link" href="#/sale">Sale</a></li>
       <li><a id="discount_link" href="#/discount">Discount</a></li>
       <li><a id="new_link" href="#/new">New</a></li>
       <li><a id="contact_link" href="#/contact">Contact us</a></li>
      </ul>
    to this:

    Code:
    <ul> 
       <li><a id="sale_link" href="#sale">Sale</a></li>
       <li><a id="discount_link" href="#discount">Discount</a></li>
       <li><a id="new_link" href="#new">New</a></li>
       <li><a id="contact_link" href="#contact">Contact us</a></li>
      </ul>
    Thos slashes between the hash and the name shouldn't be there.

    PS: I'm not sure how that will affect the JavaScript, but if it does stop if from working, then the JavaScript should be modified slightly to accommodate the change, because what you had were poorly formed links.

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi lantiqo. Welcome to the forums.
    Thanks!

    Quote Originally Posted by ralph.m View Post
    Code:
    <ul> 
       <li><a id="sale_link" href="#sale">Sale</a></li>
       <li><a id="discount_link" href="#discount">Discount</a></li>
       <li><a id="new_link" href="#new">New</a></li>
       <li><a id="contact_link" href="#contact">Contact us</a></li>
      </ul>
    Thos slashes between the hash and the name shouldn't be there.

    PS: I'm not sure how that will affect the JavaScript, but if it does stop if from working, then the JavaScript should be modified slightly to accommodate the change, because what you had were poorly formed links.
    I tried it without the slash, and it works without javascript, but not with javascript

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Try changing the JS to this:

    Code:
    window.onload = function(){    
       var fs=new fancyScroll({easingFunc: 'easeOutCubic',              
            easingTime: 1000,              
            deepLinking: true,              
            scrollMode: 'horizontal',              
            goTopText: 'Return'});  
       fs.addScroll(['#sale','#discount','#new','#contact']);    
    };


Bookmarks

Posting Permissions

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