jquery: how to scroll a div by n pixels

jquery scroll to element in div
jquery get scroll position of div
jquery scroll bottom
horizontal scrolling div with arrows javascript
jquery animate scrolltop
scrollbottom
jquery scrollintoview
jquery scrolltop offset

Using jQuery, how do you scroll a div by N more pixels?

So far I tried

$("div.foo").scrollTop(75);   //scroll down by 75 pixels

From the jQuery docs for scrollTop:

Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

The version of the function you are calling sets the vertical position of the scroll bar from the top of the element, not from the current position. So in order to scroll down from the current position you first have to retrieve your current position. There are a few ways to do that, but you could do something like:

var $foo = $("div.foo");
$foo.scrollTop($foo.scrollTop() + 75); // scroll 75px down from current

Smoothly scroll to an element without a jQuery plugin · A Beautiful Site, the page down to #target-element over a period of one second (1,000 milliseconds = 1 second). The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

If you are looking for Vanilla JavaScript solution like I was, here it is.

var selectedElement = document.querySelector('div.foo');
selectedElement.scrollTop = 75;

querySelector documentation, scrollTop documentation

How to Smooth Scroll to an Element with Native Javascript, The vertical scroll position is the same as the number of pixels that are hidden from view If the scroll bar is at the very top, or if the element is not scrollable, this  // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash;

the following code may help and you may see this link . and you can pixel value from window atrributes.Thank you.

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Find Scroll Height for elements using jQuery, Get the current horizontal position of the scroll bar for the first element in the set the number of pixels that are hidden from view to the left of the scrollable area. A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.

.scrollTop(), Example. Return the vertical scrollbar position for a <div> element: Definition and Usage position, Specifies the vertical scrollbar position in pixels  jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.

.scrollLeft(), Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically: var elmnt = document.getElementById("myDIV"); elmnt.scrollLeft = 50; JqueryUI - Draggable - jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mous

jQuery scrollTop() Method, div > < style > #example { width : 300 px ; height : 200 px ; border : 25 px solid #​E8C48F ; padding It has the border, padding and scrolling. Parameter Type Description; alignTo: Boolean: Optional. A boolean value that indicates the type of the align: true - the top of the element will be aligned to the top of the visible area of the scrollable ancestor

Comments
  • Please share the css for you div.foo.