jQuery Smooth Horizontal Scroll

Question

I've created a long horizontal page and using anchors to navigate to section's within the page. I added a jQuery smooth scrolling function but it's not taking affect?

Here's the navigation:

<ul class="nav">
<li><a href="#starters">Starters</a></li>
<li><a href="#main">Main Dishes</a></li>
<li><a href="#special">Special Dishes</a></li>
<li><a href="#side">Side Dishes</a></li>
</ul>

Within the content i've added corresponding anchors:

<a name="starters"></a>

And here's the jQuery function:

$(function() {
$('ul.nav a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1500, "easeInOutExpo");
    event.preventDefault();
});
});

The anchor's work fine, clicking the navigation takes you to the desired section but it jumps instead of scrolling.

Any ideas why??

score 2 · Answer 1 · answered Mar 31 '17 at 04:52

It's simple add class to your div which need to scroll for example below:

<ul class="nav">
<li class="a"><a href="#starters">Starters</a></li>
<li class="b"><a href="#main">Main Dishes</a></li>
<li class="c"><a href="#special">Special Dishes</a></li>
<li class="d"><a href="#side">Side Dishes</a></li>
</ul>

Now, your js will be like this:

$(function() {
$('#clickable element').bind('click',function(event){
    $('#targetelement or div').stop().animate({
        scrollLeft: $('.a').offset().left
    }, 500);
    event.preventDefault();
});
});

likewise you can build js for b,c,d classes.

score 0 · Answer 2 · answered Nov 02 '13 at 23:11

0

It looks like your code is correct except for this:

<a name="starters"></a>

Change name to id. There is no HTML name attribute for anchor tags as far as I know. Also, you don't need "corresponding anchors" for your sections. Assuming your sections are wrapped with a <section> or <div>, just give each of your wrapping block elements an id identical to the href from each of your anchor links. So:

<section id="starters">content</section>

answered Nov 02 '13 at 23:11

th3lonius

1
1

This is true for HTML5, however 's do have names otherwise: http://www.w3schools.com/tags/att_a_name.asp – Waclock Nov 02 '13 at 23:33

score 0 · Answer 3 · answered Jan 07 '14 at 10:58

0

Maybe you forget to use jquery easing for animations http://matthewlein.com/experiments/easing.html

answered Jan 07 '14 at 10:58

therealpablors

1

4

Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 07 '14 at 11:18
Thanks for your comment Kleopatra. I have the same problem than Rumman and the solution was use the jquery easing library for enable the animation – therealpablors Jan 10 '14 at 10:14

jQuery Smooth Horizontal Scroll

3 Answers3