How do I get an element to scroll into view, using jQuery?

by

There’s a DOM method called scrollIntoView, which is supported by all major browsers, that will align an element with the top/left of the viewport (or as close as possible).

$("#myImage")[0].scrollIntoView();

On supported browsers, you can provide options:

$("#myImage")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
    block: "start" // or "end"
});

Alternatively, if all the elements have unique IDs, you can just change the hash property of the location object for back/forward button support:

$(document).delegate("img", function (e) {
    if (e.target.id)
        window.location.hash = e.target.id;
});

After that, just adjust the scrollTop/scrollLeft properties by -20:

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;

More Related Contents:

  1. Dynamic page load can’t load Java with page
  2. Why I have to put all the script to index.html in jquery mobile
  3. When should I use jQuery’s document.ready function?
  4. Replacing css file on the fly (and apply the new style to the page)
  5. jQuery checkbox checked state changed event
  6. How to find if an array contains a specific string in JavaScript/jQuery?
  7. How to include multiple js files using jQuery $.getScript() method
  8. Prevent Page Load on Jquery Form Submit with None Display Button
  9. How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?
  10. How to add/subtract dates with JavaScript?
  11. jquery submit form and then show results in an existing div
  12. JS – get image width and height from the base64 code
  13. jqGrid access cell data while it is being edited
  14. time delayed redirect?
  15. jQuery on ‘double click’ event (dblclick for mobile)
  16. jquery : $().animate() is not a function
  17. Jquery getJSON populate select menu question
  18. Adding an onclick function to go to url in JavaScript?
  19. Event propagation in Javascript
  20. Getting Spotify API access token from frontend JavaScript code
  21. Waiting for dynamically loaded script
  22. How to disable mouseout events triggered by child elements?
  23. Jquery Ajax beforeSend and success,error & complete
  24. Generate Random Color distinguishable to Humans
  25. How to get the width of an svg:g element
  26. Is it a bad practice to use jQuery in Angular? [closed]
  27. How to make only some text in a text-box read-only while allowing the rest to be edited
  28. flot graph, use legend to turn on/off series
  29. trigger file upload dialog using javascript/jquery
  30. Python Flask Cors Issue

Leave a Comment