Menu icon Foundation
Trying to add smooth scrolling

I'm trying to add smooth scrolling to my site. Using Foundation 5 still. I found a script that works on all my pages accept for the ones with the accordions. I know it's conflicting I think because of the href="#" but I just don't know how to make it work with the accordions. Here is the .js code I'm adding for smooth scrolling when clicking on an anchor link and also to have a back to top button at the bottom of the page:

$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 300;
$(window).scroll(function() {	
	if ( $(window).scrollTop() > amountScrolled ) 
		{$('a.back-to-top').fadeIn('slow');} 
	else {$('a.back-to-top').fadeOut('slow');}
});
$('a.back-to-top').click(function() 
	{$('body, html').animate({scrollTop: 0}, 700);return false;});



$('a[href*=#]:not([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) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

F5smooth scrollingaccordions

I'm trying to add smooth scrolling to my site. Using Foundation 5 still. I found a script that works on all my pages accept for the ones with the accordions. I know it's conflicting I think because of the href="#" but I just don't know how to make it work with the accordions. Here is the .js code I'm adding for smooth scrolling when clicking on an anchor link and also to have a back to top button at the bottom of the page:

$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 300;
$(window).scroll(function() {	
	if ( $(window).scrollTop() > amountScrolled ) 
		{$('a.back-to-top').fadeIn('slow');} 
	else {$('a.back-to-top').fadeOut('slow');}
});
$('a.back-to-top').click(function() 
	{$('body, html').animate({scrollTop: 0}, 700);return false;});



$('a[href*=#]:not([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) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

This post has been closed. No new replies can be added.

Carolyn Lee 6 months ago

Ah I figured out a solution. I changed this line:

$('a[href*=#]:not([href=#])').click(function() {

to

$('a.jump[href*=#]:not([href=#])').click(function() {

and then added class="jump" to any anchor links I had. That way it doesn't interfere with the accordion .js.