I'm trying to scroll to a desired position when the page loads. The scroll bar is inside a div. Here is the code:
function scroll()
{
document.getElementById('content').scrollTo(500,500);
}
but its not working, any sugestions as my JavaScript is pretty bad???
Converting Ian's comment to an answer:
scrollTo only applies to the window, not individual elements. These have scrollTop and scrollLeft properties that you can change:
function scroll(elem,x,y) {
elem.scrollLeft = x;
elem.scrollTop = y;
}
// to call:
scroll(document.getElementById('content'),500,500);
Related
Hi Guys,
I'm not so good with jQuery and javascript.
I will make a script that take the position of my div and when it's on the top of the page it make something.
Example:
I have a menu. When i scroll the page and my div arrive at the top (or better at 100/200px from top), something in my menu changes...
I hope somebody can help me.
Thanks.
You should use the jQuery offset() scrollTop() and scroll() methods to achieve this.
http://api.jquery.com/offset/
https://api.jquery.com/scrollTop/
https://api.jquery.com/scroll/
Offset returns the pixel value of the elements from the top of the page. Run this on scroll, and you can detect when the element is 100px, or 200px from the top.
Here is an example of running offset() and scrollTop() on window.scroll(), and adding/removing classes when the element has reached the top of this page. In this example, I am fixing the $mainMenuBar to the top of the page when the user scrolls past it, and un-fixing it when the user scroll back up past it.
// declare vars
var $window = $(window),
$mainMenuBar = $('.anchor-tabs'),
$mainMenuBarAnchor = $('.anchor-tabs-anchor');
// run on every pixel scroll
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainMenuBar.addClass('fixed-top');
$mainMenuBarAnchor.height($mainMenuBar.height());
}
else {
// Unstick the div
$mainMenuBar.removeClass('fixed-top');
$mainMenuBarAnchor.height(0);
}
});
Hope this helps.
You can compare the offset of your div element to how far down the page the user has scrolled.
The $(window).scrollTop() function get you how far the user has scrolled down, i.e :
$(window).scroll(function() {
var yourDiv = $("#theIdOfYourDiv");
var window_offset = yourDiv.offset().top - $(window).scrollTop();
if ( window_offset < 100 )
{
// do what you want
}
});
For another stack question I have tried to write a short script. It should track the position of a div .list_item while scrolling and apply the .offset().top to another div.
To test if the function is fired I have written a console.log inside my code, which was never seen again. Why does my function do not fire while scrolling?
$(document).ready(function() {
// fire function everytime the window is scrolled
$(window).scroll(function(){
// set element to relate to
var list_items = $('div.list_item');
// get each position
list_items.each(function() {
// store offset().top inside var
var list_item_position = $(this).offset().top;
// select previous dropdown_list item
$(this).prev().find('ul.dropdown_list').css({
// apply offset top
top: list_item_position + "px"
});
});
// write to console to track changes
console.log('positions updated');
}); // .scroll
}); // document.ready
Suggestions appreciated!
JSFIDDLE DEMO
As pointed out by #Carlos Delgado in the comments, $(window).scroll tracks, if the windows is being scrolled, while setting the first line to $('#wrapper').scroll tracks, if the #wrapper is being scrolled, which works perfect.
Thanks for pointing this out and the other helpful comments!
I want a div to be scroll upto some height with scrolling.
I am using this code bt its not working for me,please help me out to solve this problem using javascript or css i can't use jquery in my programm
thanks in advance
element.style.position='fixed';
element.style.scrollTop ='800px';
element.style.overflow='scroll';
function Scroll()
{
var intY = document.getElementById("impulseadcontainer").scrollTop ;
console.log("pos"+intY);
}
You have to assign something to the scrollTop attribute in order for it to work.
function scroll() {
document.getElementById("impulseadcontainer").scrollTop = 0; // scrolls to top (set here whatever value you want)
}
You can do this with the following javascript code.
document.scrollTo(0,document.getElementById('id-of-element').offsetTop);
I have been using JavaScript scrollTop function to scroll the div to top by 5 px. but its not working.
I am using:
scdiv.scrollTop = "5px";
The problem is it scrolls the div to top instead of moving to 5 px. Any suggestions?
scrollTop is a property, its value is an int.
div.scrollTop += 5;
https://developer.mozilla.org/en/DOM/element.scrollTop
$("#yourButtonId").on('click',function(){
var scDiv = $("#scdiv");
var top = scDiv.css('top');
top = parseInt(top);
scDiv.css('top',(top-5)+"px");
//To make it visually scrollable
scDiv.animate({
top: top
},500);
});
scrollTop accepts integer numbers, it doesn't understand CSS values like px, so you would use something like this: element.scrollTop += 5;
See an example here: http://jsfiddle.net/pMafC/.
You can click a button to make the div scroll.
See scrollTop - MDN.
In my below code a function to scroll DIV for every set of intervals where when I try to scroll up due to interval refresh scroll bar again coming down.
My code:
var int = self.setInterval("f2()", 1000);
function f2() {
var objDiv = document.getElementById("messages2");
objDiv.scrollTop = objDiv.scrollHeight;
}
Now, by using onscroll property for DIV is there anyway to stop scrolling down when holding scroll bar with mouse?
Something like
var int = self.setInterval("f2()", 1000);
function f2() {
var objDiv = document.getElementById("messages2");
// if(objDiv.onscroll) i.e. when the particular DIV's scroll bar is on hold by cursor.
{
return false;
}
else
{
objDiv.scrollTop = objDiv.scrollHeight;
}
}
If the above kind of function can be implemented anybody please correct its syntax. I am a newbie to JavaScript.
Thanks in advance..!
I’m not sure what you are asking here, but window has a scroll event that you can listen to, and so does any other element that has overflow: auto|scroll set using CSS.
You can’t prevent the default scrolling behavior, but you can use the scrollTo() method or the scrollTop property if you want to do something annoying like:
window.onscroll = function() {
window.scrollTo(0,0);
};
Here is a nice compat table of the scroll event: http://www.quirksmode.org/dom/events/scroll.html
scrollTo() docs: https://developer.mozilla.org/en/Window.scrollTo