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

Since you want to know how it works, I’ll explain it step-by-step.

First you want to bind a function as the image’s click handler:

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

That will apply the click handler to an image with id="someImage". If you want to do this to all images, replace '#someImage' with 'img'.

Now for the actual scrolling code:

  1. Get the image offsets (relative to the document):var offset = $(this).offset(); // Contains .top and .left
  2. Subtract 20 from top and left:offset.left -= 20; offset.top -= 20;
  3. Now animate the scroll-top and scroll-left CSS properties of <body> and <html>:$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });

Related Posts:

  1. How do I redirect to another webpage?
  2. jQuery append() vs appendChild()
  3. ReferenceError: $ is not defined
  4. Cannot read property ‘push’ of undefined when combining arrays
  5. Toggle show/hide on click with jQuery
  6. How to deal with net::ERR_SSL_PROTOCOL_ERROR?
  7. jQuery.click() vs onClick
  8. Scroll to an element with jQuery
  9. Download File Using JavaScript/jQuery
  10. Check if checkbox is checked with jQuery
  11. Getting Error “Form submission canceled because the form is not connected”
  12. Is there a link to the “latest” jQuery library on Google APIs?
  13. Change Background color (css property) using Jquery
  14. jQuery get textarea text
  15. How can jQuery deferred be used?
  16. Uncaught TypeError : cannot read property ‘replace’ of undefined In Grid
  17. Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
  18. Disable/enable an input with jQuery?
  19. Get class name using jQuery
  20. When and why to ‘return false’ in JavaScript?
  21. querySelector vs. getElementById
  22. What does on() in JavaScript do?
  23. jQuery animate backgroundColor
  24. Use images like checkboxes
  25. Left() function in Javascript or jQuery
  26. JavaScript error (Uncaught SyntaxError: Unexpected end of input)
  27. ChangeDate – Date Picker Bootstrap
  28. Understanding how data-dismiss attribute works in Bootstrap
  29. Add table row in jQuery
  30. Create table with jQuery – append
  31. When is JavaScript synchronous?
  32. How to reset a form using jQuery with .reset() method
  33. Uncaught TypeError: Cannot read property ‘msie’ of undefined
  34. How to hide a div with jQuery?v
  35. How do I set/unset a cookie with jQuery?
  36. How to convert selected HTML to Json?
  37. How to Open New window on every Click
  38. Jquery Ajax Call, doesn’t call Success or Error
  39. How to create a stopwatch using JavaScript?
  40. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  41. Convert UTC date time to local date time
  42. With jQuery, how do I capitalize the first letter of a text field while the user is still editing that field?
  43. Obtain form input fields using jQuery?
  44. How to move an element after another element using JS or jquery?
  45. How can I get the last character in a string?
  46. Why is the jquery script not working?
  47. JQuery Datatables : Cannot read property ‘aDataSort’ of undefined
  48. Load image with jQuery and append it to the DOM
  49. Jquery button click() function is not working
  50. Change text on hover, then return to the previous text
  51. Javascript/Jquery Convert string to array
  52. jQuery make global variable
  53. How to send email by using javascript or jquery
  54. How to get current date in jQuery?
  55. How do I check whether a checkbox is checked in jQuery?
  56. Print the contents of a DIV
  57. How to Scroll Down – JQuery
  58. Embedding instagram webpage inside an iframe
  59. Do something if screen width is less than 960 px
  60. Uncaught TypeError: Cannot read property ‘toUpperCase’ of undefined
  61. jQuery remove options from select
  62. Load Image from javascript
  63. How to manage a redirect request after a jQuery Ajax call
  64. is there something like isset of php in javascript/jQuery?
  65. jQuery – Dynamically Create Button and Attach Event Handler
  66. Highlight a word with jQuery
  67. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  68. Error: TypeError: $(…).dialog is not a function
  69. getContext is not a function
  70. How to change the text of a label?
  71. How to check ‘undefined’ value in jQuery
  72. Data column(s) for axis #0 cannot be of type string in google chart dashboard [duplicate]
  73. navigator.geolocation.getCurrentPosition sometimes works sometimes doesn’t
  74. Jquery Value match Regex
  75. Using “&times” word in html changes to ×
  76. How to check if the URL contains a given string?
  77. How should I initialize jQuery?
  78. How to reload page every 5 seconds?
  79. How to go to a URL using jQuery?
  80. How to close a window using jQuery
  81. Fire oninput event with jQuery
  82. What is the non-jQuery equivalent of ‘$(document).ready()’?
  83. Changing the selected option of an HTML Select element
  84. How to scroll to top of page with JavaScript/jQuery?
  85. How to set “style=display:none;” using jQuery’s attr method?
  86. Change the selected value of a drop-down list with jQuery
  87. How to dequeue a script?
  88. Adding JavaScript to a WordPress website
  89. List of JS Events for Widgets?
  90. JQuery not loading
  91. Uncaught ReferenceError: jQuery is not defined – although jQuery is loaded [closed]
  92. Uncaught TypeError: jQuery(…).slider is not a function
  93. Putting custom html/js page into Elementor as it’s own block
  94. How to load Javascript code or functions.php later in a child theme?
  95. Get the ID of a page in Parent combobox in editor
  96. “jQuery Not Defined” Error When Connecting to PayPal
  97. Fade-in Fade-out doesn’t work in WordPress
  98. Can’t Listen to KeyDown in TInyMCE Iframe (jQuery) and Pass it to Parent HTML FORM
  99. Open image gallery on link click
  100. Access jQuery tabs from primary menu while adding/removing class on tab container elements (accessing diff. tabs/tab content via primary menu items)

Leave a Comment