Smooth scroll with & without javascript

JavaScript
1

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:

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

<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

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

Hi lantiqo. Welcome to the forums. :slight_smile:

There is a simple error in your code which is stopping this from happening. All you need to do is change this:

<ul> 
   <li><a id="sale_link" href="#[COLOR="#FF0000"]/[/COLOR]sale">Sale</a></li>
   <li><a id="discount_link" href="#[COLOR="#FF0000"]/[/COLOR]discount">Discount</a></li>
   <li><a id="new_link" href="#[COLOR="#FF0000"]/[/COLOR]new">New</a></li>
   <li><a id="contact_link" href="#[COLOR="#FF0000"]/[/COLOR]contact">Contact us</a></li>
  </ul>

to this:

<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. :slight_smile:

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

Thanks!

I tried it without the slash, and it works without javascript, but not with javascript

5

Try changing the JS to this:

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