How do I synchronize the scroll position of two divs?

by 
$('#bottom').on('scroll', function () {
    $('#top').scrollTop($(this).scrollTop());
});

Here we are using .scrollTop() for all it’s worth, getting the scrollTop value from the element with scroll-bars, and setting the scrollTop for the other element to sync their scroll positions: http://api.jquery.com/scrollTop

This assumes that your bottom element has an ID of bottom and your top element has an ID of top.

You can hide the scroll-bars for the top element using CSS:

#top {
    overflow : hidden;
}

Here is a demo: http://jsfiddle.net/sgcer/1884/

I suppose I’ve never really had a reason to do this, but it looks pretty cool in action.

More Related Contents:

  1. How to do this mouse over effect in jquery?
  2. Creating a JavaScript global array with static elements?
  3. Setting “checked” for a checkbox with jQuery
  4. jQuery document.createElement equivalent?
  5. Inserting a text where cursor is using Javascript/jquery
  6. jQuery’s jquery-1.10.2.min.map is triggering a 404 (Not Found)
  7. jQuery event to trigger action when a div is made visible
  8. how to access iFrame parent page using jquery?
  9. Is there a jQuery autogrow plugin for text fields?
  10. Set attribute without value
  11. How do I catch jQuery $.getJSON (or $.ajax with datatype set to ‘jsonp’) error when using JSONP?
  12. Generate unique number within range (0 – X), keeping a history to prevent duplicates
  13. Why does appending a to a dynamically created seem to run the script in the parent page?
  14. How to convert unordered list into nicely styled dropdown using jquery?
  15. Call js-function using JQuery timer
  16. IP to Location using Javascript
  17. How can I toggle the element that is clicked and hide all others?
  18. jQuery validate plugin on DIV
  19. Detect browser character support in javascript?
  20. Count instances of string in an array
  21. how to get selection inside a div using jquery/javascript
  22. How can I make a button redirect my page to another page? [duplicate]
  23. Get Correct keyCode for keypad(numpad) keys
  24. Change placeholder text
  25. Prototype equivalent for jQuery live function
  26. hide div if clicked outside of it [duplicate]
  27. Is there an “after submit” jQuery option?
  28. jQuery JSONP ajax, authentication header not being set
  29. Error: Permission denied to access property ‘handler’
  30. jQuery SVG vs. Raphael [closed]

Leave a Comment