2

Might be a duplicate but I cant seem to find the right answer.

I have a button, and when I press it, I want it to scroll to the li item that has an ID of '#li-1', and also have it hovered. I know my code is wrong but not really sure how to fix it (new to jquery). So how do I achieve the desired results?

Here's a jsfiddle link - https://jsfiddle.net/orb1vw28/7/

Thanks in advance

$(document).ready(function(){

    $('.button').click(function(){
        $('body').scrollTo('#li-1', 200);
        $("#li-1").toggleClass("hov");
    });
})
billybobjones
  • 463
  • 1
  • 6
  • 15

2 Answers2

1

Ok, you have some problems in your code, but i made some minor changes and managed it to work.

JSfiddle wans't working for me, so i made you a pen.

http://codepen.io/filipemerker/pen/jbvxyY

The thing is that you need to pass a numeric value to "scrollTo", not a selector. I just calculated the difference between the parent scrolltop minus the LI element scrolltop. I also added an animation for you. Check it out.

$('#event-list').stop().animate({scrollTop:location}, '200', 'linear');
Filipe Merker
  • 2,061
  • 1
  • 19
  • 38
1

You can calculate the correct target position – the one which you scroll to – with the getScrollTargetPosition() function in this gist (heavily commented, so no need to explain it here).

Based on that and the jQuery.scrollable plugin – which solves cross-browser issues as well as a bunch of scroll-related usability problems –, you'd end up with this code:

$( document ).ready( function () {
    $( ".button" ).click( function ( event ) {

        var $window = $( window ),
            $scrollContainer = $( "#event-list" ),
            $target = $( "#li-1" ),
            targetPosition = getScrollTargetPosition ( $target, $window );

        event.preventDefault();

        $scrollContainer.scrollTo( targetPosition, {
            complete: function () {
                $target.toggleClass( "hov" );
            }
        } );

    } );
} );

To see it in action, check it out in JSBin (result, source).

Community
  • 1
  • 1
hashchange
  • 5,971
  • 1
  • 40
  • 40
  • This definitely doesn't need a bunch of extra code. Best to not push your plugin on *anything* that comes near. But it you think you must anyway, it would be better suited as a comment. – Shikkediel Nov 06 '15 at 01:52
  • @Shikkediel I'd actually ask you to change your tone a bit, it comes across as rather derogatory. That aside, doing it without "a bunch of extra code" comes at a cost: http://stackoverflow.com/a/32046714/508355 . There's a trade-off between UX and code size here. You emphasize code size? Fair enough. But it's certainly not the only way to approach this. – hashchange Nov 06 '15 at 11:06
  • Not changing my tone, sorry. Speaking my mind as is in the spirit of the forum. This question can have a very basic answer and you've been posting your plugin several times lately on similar ones. Under some circumstances it might be suited but I don't think it is in this case. And it really is quite bloated. – Shikkediel Nov 06 '15 at 14:44