Menu icon Foundation
Suggest a js scroll to script that will work with F5?

Hello, can anyone suggest a js scroll to script that works with F5 please?

I've tried numerous ready made options and homebrewed js to no avail. I'm hoping someone else has implemented this in the past.

Basically I just need a script that will scroll to a defined spot when a link is clicked. Very simple, I just cannot get this to work with Foundation 5...

Thanks, much appreciated.

Dave

scrolltojquery

Hello, can anyone suggest a js scroll to script that works with F5 please?

I've tried numerous ready made options and homebrewed js to no avail. I'm hoping someone else has implemented this in the past.

Basically I just need a script that will scroll to a defined spot when a link is clicked. Very simple, I just cannot get this to work with Foundation 5...

Thanks, much appreciated.

Dave

Rafi Benkual over 5 years ago

I've seen some sites using this one http://demos.flesler.com/jquery/scrollTo/
Seems to be one of the best http://css-tricks.com/snippets/jquery/smooth-scrolling/

Dave over 5 years ago

Thanks Rafi, I will have a look. Hadn't seen the one from css-tricks.

Wing-Hou Chan over 5 years ago

Hey Dave!

I also implement a smooth-scroll on one of my client's sites:

$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})})

Replace .scroll with a class of your own or use .scroll. Whatever class you use must be applied to the anchor which is going to be clicked. #target sets the destination. Use your own id or use #target. #target must be applied to the destination. The number is the time taken for the animation to complete in milliseconds; change it to whatever you want.

Hope this helps! It took a while for me to dig it out of my JS file as I had minified it xD

Dave over 5 years ago

Thank you Wing-Hou, very helpful indeed.

Andrew J. Holden over 5 years ago

Thanks Wing-Hou!

I was using your code with a Foundation-based Wordpress theme, so I changed the "$" to "jQuery" to acommodate for no-conflict mode:

<script>
    jQuery(function(){jQuery(".scroll").click(function(){jQuery("html,body").animate({scrollTop:jQuery("#target").offset().top},"1000");return false})})
</script>

Worked great. I also tested out this code from CSS tricks which automates the scroll behaviour for any anchor link. Note that I added a scroll offset of 25px. If anyone would like to use this code, you may wish to remove the "-25" value entirely.

http://css-tricks.com/snippets/jquery/smooth-scrolling/

<script>
    jQuery(function() {
        jQuery('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = jQuery(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    jQuery('html,body').animate({
                        scrollTop: target.offset ().top -25
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

Charis almost 5 years ago

Hi there

Great job, worked perfectly, but..............

I cannot get it to work using off-canvas navigation.

The issue arises because the links in the off-canvas navigation uses a href '#' to trigger the navigation closed. But the script above requires each a href to have an id like a href '#sectionone'

And when I try to get it to work, if I put an id in each href, it does not scroll at all and if I put a # and #section one it still does not work.

Is there a way to modify the above code from css tricks so it works using off canvas navigation, meaning have to set the a href id to just a plain id

Any help would be great

leo_haldan almost 5 years ago

where do i put the script?:
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})})

I put that in a seperate js file? Im kinda new to js just getting going.

Chris M almost 5 years ago

Hey Leo,

You would put that code in script tags, in the footer of your website, like this:

 <script>
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})})
</script>