CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mojimi
Mojimi

Reputation: 3171

JQuery scroll window to show div depending on its location

When I click my button, I append a new div. I would like that, if any part of the div is not visible to the window, scroll untill it shows.

So if it is upwards from the center of the window, scroll up JUST until you see it's top, and if it is downwards from the center, scroll down just until you see its bottom.

In my searchings I found https://api.jquery.com/scrollTop/ , but that doesn't seem to be what I'm describing

I only want to scroll enough to display it entirely on screen, not always on top

Upvotes: 2

Views: 3453

Answers (3)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 20007

If I understand correctly, this jsfiddle is what you are looking for.

I also added a simple animation so the document doesn't awkwardly jump around the viewport.

Features

  • If a new element is created, and part of that new element is below the current viewport, the document will be scrolled until the bottom of the viewport is shown. Vice versa if part of the new element is above the current viewport.
  • If the new element is completely visible within the current viewport, no scrolling will occur.
  • All scrolling effects are animated.
  • A configurable offset (Leave some padding instead of scrolling to the very edge of the new element)

How it works

When the button is clicked, a new div element is appended.

$('section').append('<div>');

Next, we figure out if this div is above the current viewport using the below function:

function isElementAboveViewport(element) {
  return $(element).offset().top < $(window).scrollTop();
}

in an if statement:

if (isElementAboveViewport($('section > div:last-child'))) {
  ...
}

If the condition is truthy, we scroll! (offset is configurable - In the JS fiddle, I used 40 which is the height of the button covering the top 40px of the viewport)

$('html, body').animate({
  scrollTop: $('section > div:last-child').offset().top - offset
}, 1000);

Now, we check if the new element is below the current viewport with a similar function:

function isElementBelowViewport(element) {
  return $(element).offset().top + $(element).height() > $(window).scrollTop() + $(window).height();
}

If the element is too far down in the document, we scroll! (Again, offset is configurable)

$('html, body').animate({
  scrollTop: $('section > div:last-child').offset().top + $('section > div:last-child').height() - $(window).height() + offset
}, 1000);

Please let me know if this is what you were looking for and/or if you have any questions about how it works.

Upvotes: 0

Divyanshu Maithani
Divyanshu Maithani

Reputation: 15016

Check this working fiddle for the solution.

You can use scrollTop() to scroll to any div. First we need to find the direction of the scroll to correctly provide the value for scrollTop() function. This can be found using position().

$('#button4').click(function() {
    // check if the div lies below the button
    if ($('#div3').position().top - $('#button4').position().top > 0) {
      // in this case we need to add shift
      var shift = $(window).height() - $('#div3').height();
    } else {
      var shift = 0;
    }
    $(window).scrollTop($('#div3').offset().top - shift);
  });

Alternatively if you wish to check the position of the div relative to the current viewport (or the center of the current window view) you can use getBoundingClientRect() like:

$('#button4').click(function() {
    // check if the div lies below the viewport
    if ($('#div3')[0].getBoundingClientRect().top > 0) {
        // in this case we need to add shift
      var shift = $(window).height() - $('#div3').height();
    } else {
      var shift = 0;
    }
    $(window).scrollTop($('#div3').offset().top - shift);
  });

Here is the alternate fiddle.

Upvotes: 1

Vincent
Vincent

Reputation: 202

So if you are using jQuery.

    //scroll top of element
    var $myNewElement = $(".new-element-class");
    $('html, body').scrollTop($myNewElement.offset().top)

I think this should work. Make sure your div is appended before calling the scrollTop function.

Upvotes: 1

Related Questions