Nicola Bertelloni
Nicola Bertelloni

Reputation: 333

Scrolling page with jQuery


I'm trying to make my whole page scroll when an element is :hovered

$(document).ready(function(){

    $('.wrap-who-mobile').mouseover(function(){

      $('html','body').animate({
      scrollTop: .offset(300).top
      }, 300);

    });

});

I'm at this point but nothing happens, I'm a total mess with jQuery, can you help me?
My goal is to move up the page of 300px when .wrap-who-mobile is :hovered

thank you

Upvotes: 0

Views: 65

Answers (2)

Cláudio Barreira
Cláudio Barreira

Reputation: 459

UPDATE

Think this should do it:

$('.wrap-who-mobile').mouseover(function(){
  var newPos = 300;
  var scrollHeight = $('body').scrollTop();

  $('html,body').animate({
    scrollTop: scrollHeight - newPos
  }, 300);

});

https://jsfiddle.net/e0Lw4meo/3/

Upvotes: 0

Every Screamer
Every Screamer

Reputation: 530

Use this plugin: https://github.com/flesler/jquery.scrollTo

Its easy to include and easy to use:

`$('.wrap-who-mobile').mouseenter(function(){
   //basic usage of scroll-top plugin
    $("body").scrollTo(300,'slow',{axis:'y'});
});`

Upvotes: 1

Related Questions