在jQuery中上下滚动到元素

Question

i want to do scroll to an element as whatsapp search

when user clicked search (here it is bottom) should scroll to last element

ie; element with id chat-7 . and when click up button should scroll to chat-6 then chat-5 ..and so on.

if click down button it should scroll to down if it is not last item.

 function scroll(id){ console.log(id); $(".container").animate( { scrollTop: $("#"+id).offset().top }, "fast" ); } 

full code here http://jsfiddle.net/p3kar5bb/231/

unfortunately this code is not working properly

Answer 1

Perform the animate on the body instead of the .container

function scroll(id){
console.log(id);
$("body").animate({ scrollTop: $("#"+id).offset().top}, "fast");

}

Also set the

var pointedPosition=0;

Fiddle http://jsfiddle.net/p3kar5bb/234/

Answer 2

Because your div .container doesn't have scroll bar so you can do two things.

1. Animate Body

$("body").animate({ scrollTop: $("#"+id).parent('.item').offset().top}, "fast");

Demo

2. Set max-height to div

.container{
   height: 100%;
   overflow-y: scroll;
   max-height:200px;    
  }

Demo

Answer 3

$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 500);

Code that is given in http://jsfiddle.net/p3kar5bb/231/ is fine, just change the animate() as above.

Just tried – $('html') does not work in Chrome and $('body') does not work in Firefox, so $('html, body') is needed. And also calling .stop() is a good thing.

Answer 4

Assuming you have the element id from buttons click event , try to change the scroll function code to this:

 function scroll(id){
      $('html, body').animate({ 
      scrollTop: $("#"+id).offset().top
        }, 2000);
}

And I have update your code here http://jsfiddle.net/p3kar5bb/231/ .