61

I'm quite new to jquery and can't seem to figure out why my code isn't working. I have a horizontal layout and want to use the scrollLeft() function (which works perfect with this code)

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);
}

But ideally, I would like to animate this so that when #next is clicked there is a nice animated effect to the scroll left function

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).animate({scrollLeft: element.position().left}, 750);
}

But to no avail. What am I doing wrong?

bswinnerton
  • 4,533
  • 8
  • 41
  • 56
  • 2
    scrollLeft() is a jQuery function, which only works on DOM elements. animate() can only work on DOM style attributes, not functions. – Jason Kaczmarsky Jul 29 '11 at 15:02
  • In my situation, I found that some fixed elements cover the both site of ul , and that mistake me the ul is overflow( In fact the ul is not overflow). So I scrollLeft for so many times , and it didn't work. And the reason why is I mistook the ul is overflow which is not. – alan9uo Jan 29 '19 at 02:39

2 Answers2

88

You'll want something like this: 


$("#next").click(function(){
      var currentElement = currentElement.next();
      $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);
      return false;
   });
I believe this should work, it's adopted from a scrollTop function.
ayyp
  • 6,590
  • 4
  • 33
  • 47
  • 1
    Nothing seems to happen. I think it's because you took out the scrollTo function which selects the next element. What I have is a huge ul with multiple li's and the horizontal theme has two buttons #previous and #next, which select the next or previous item in the ul and what I would like.. is to nicely animate that navigation. Here was my original question: http://stackoverflow.com/questions/6867914/jquery-jump-to-next-element – bswinnerton Jul 29 '11 at 15:11
  • In theory you should just be able to combine the two functions because you run the `.click` function but you're calling the other one within it. Maybe try `$(window)` instead of `$('html, body')`. – ayyp Jul 29 '11 at 15:18
  • Right, but what I was saying is I think (and I could very well be wrong) that you didn't include the scrollTo function in your above code, so it's not really a function in a function, even with $(window) – bswinnerton Jul 29 '11 at 15:22
  • 2
    The `scrollTo` function code becomes `$('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);`, to put your `scrollTo` code in exactly as is, it would be `$(window).animate({scrollLeft: $(currentElement).position().left}, 750);`. However, the other thing you might want to try is turning the `element` part in your `scrollTo` function code to `$(element)`, and seeing if that works. – ayyp Jul 29 '11 at 15:27
  • why are you returning false? – Thalatta Jan 17 '15 at 00:57
  • @Andrew Peacock `$(window).animate( { scrollLeft : 320 })` is not working on FF or Chrome using jQuery: 1.11.3 – Martin Krung Jul 20 '15 at 17:31
47

First off I should point out that css animations would probably work best if you are doing this a lot but I ended getting the desired effect by wrapping .scrollLeft inside .animate

$('.swipeRight').click(function()
{

    $('.swipeBox').animate( { scrollLeft: '+=460' }, 1000);
});

$('.swipeLeft').click(function()
{
    $('.swipeBox').animate( { scrollLeft: '-=460' }, 1000);
});

The second parameter is speed, and you can also add a third parameter if you are using smooth scrolling of some sort.

Cfreak
  • 19,191
  • 6
  • 49
  • 60
Colin
  • 471
  • 4
  • 4