0

I have a regular scrolling view, and on this view there are squares viewes (see attached photo), and I have some highlight view that im using a skip button to move between the screens and highlight them, sort of focusing on them...but when I get to the bottom of the page the highlight is on half of the square cause the other half is hiding down in the bottom (see attached photo), so I want to scroll the page up so I can see the whole square...does anyone knows how can I do this animation? im using angular with typescript.

enter image description here

thanks!!

JohnBigs
  • 2,691
  • 3
  • 31
  • 61

2 Answers2

0

Call this function to scroll to the element:

function scrollToHelper(event) {
    var offset = $(event.currentTarget).offset().top;
    $("body").animate({scrollTop: offset}, 500);
}

Make sure to pass $event on your template and pass that as the parameter of that function.

PS: You might need to tweak with the offset to place it better based on ur needs.

Wagner Danda da Silva Filho
  • 4,958
  • 9
  • 39
  • 49
0

https://jsfiddle.net/71zono60/1/

Basically, as I said in my comment, you want to trigger the scrolling on hover, hence the

$( '.widget' ).mouseover( ... );

And what you want to do, is check if the widget's position is out of the window's box, like so:

  var winHeight = $( window ).height( );
  var scrollTop = $( window ).scrollTop( ); 
  var winBottom = winHeight + scrollTop; // this gives the vertical position of the last visible pixel
  var thisPos = $( this ).offset( ).top;
  var thisPosBottom = thisPos + $( this ).height( ); // this gives the vertical position of the widget's last pixel 

  // so if the widget's last pixel comes AFTER the window's last visible one, we need to trigger the scrolling function
  if( thisPosBottom > winBottom )
    $( 'body' ).animate( {
        scrollTop: scrollTop + ( thisPosBottom - winBottom ) + 10
    }, 500 );

Enjoy! :)

Note: I decided not to set the scrollTop to thisPos ( which is the widget's top offset ), because in this case your mouse is more than likely going to end up on another widget, which means it'll be highlighted and this will be triggered over and over until it reaches the end of the page, and you don't want that!

VirginieLGB
  • 548
  • 2
  • 15