Does scrollIntoView() work in all browsers? If not is there a jQuery alternative?
It is supported yes, but user experience is... bad.
As #9bits pointed out, this has long been supported by all major browsers. Not to worry about that. The main problem is the way that it works. It simply jumps to a particular element that may as well be at the end of the page. By jumping to it, users have no idea whether:
page has been scrolled up
page has been scrolled down
they've been redirected elsewhere
The first two can be determined by scroll position, but who says users kept track of scroll position before jump was done? So it's an nondeterministic action.
The last one may be true especially if the page has moving header that gets scrolled out of view and remaining page design doesn't imply anything on being on the same page (if it also doesn't have any total height vertical element like left menu bar). You'd be surprised how many pages have this problem. just check them out yourself. Go to some page, look at it at top, then press End key and look at it again. It is likely that you'll think it's a different page.
Animated scrollintoview jQuery plugin to the rescue
That's why there still are plugins that perform scroll into view instead of using native DOM function. They usually animate scrolling which eliminates all 3 issues outlined above. Users can easily keep track of the movement.
Looks like it does: http://www.quirksmode.org/dom/w3c_cssom.html
I use Matteo Spinnelli's iScroll-4 and it works in iOS safari as well. It has three methods scrollTo, scrollToElement and scrollToPage. Let's say you have an unordered list of elements wrapped inside a div. As Robert Koritnik has written above, you need to have that slight animation to show that you have scrolled. The below method achieves that effect.
scrollToElement(element, time);
read please about scrollIntoViewIfNeeded
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
You can use jQuery alternative and animate <html> and <body> elements:
$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
Have not tried this, but seems like piggybacking on built in scrollIntoView function would save much code. Here is what I would do if you want animated action:
Cache current scroll position of the container as START POSITION
run built in scrollIntoView
Cache the scroll position again as the END POSITION
Return container back to START POSITION
Animate scrolling to END POSITION
Css solved it guys!!
I picked the target id with #idSelected and styled it with css "scroll-margin-top" and defined my margin top in rems (use what ever measurement that suits you).
#idSelected {
scroll-margin-top: 10rem;
}
Related
I have a rather large image (not my choice how it was given to me) I have a simple navigation structure and when I click on one of the links I want to be able to scroll to a certain point of the large jpg below the menu. It's one large image so using # isn't going to work. I assume this is going to need to be a javascript or jquery function, but I'm just how sure how to set that up. I've looked around but everything I found is for a slide show, where I just have one overly large image that I need to scroll down and up via a menu button. I tried having the a tag jump around the page, and that kind of worked, but it didn't scroll it just jumped.
I wish I had code to show, but nothing I have used worked.
You can use scrollTop property of element like body or any div to scroll at any position. see here created a pen for the same.
If you are going to animate the page scroll you will probably need to use jQuery's animate function.
$("html, body").animate({
scrollTop: 400 /*Desired offset position*/
}, 1000);
Take a look at this jsFiddle as an example.
You could also position anchors behind the image at the positions you need the page to scroll
See this jsFiddle
How can I keep the browser from scrolling, or how can I make the browser continually scroll to a fixed posistion?
I am working on a library for the Nintendo 3DS browser. I made the page fit perfectly within the browser, but the up arrow makes it scroll because the bottom screen is the only window recognized as the visible area.
I want to make it so the div #bottomScreen is the only thing in the bottom screen, and disabling scrolling is the only thing I can think that would work.
I have figured out how to scroll it to a said position via
document.body.scrollTop = 220;
How can I make it continually go to this position?
Making a repeating timer with setTimeout and putting the above code in it won't work. I believe it is because this only works prior to the page loading.
Any advice on how to enforce it?
It should work even after page load. Here's the code, although i'm not sure what the intent of the code is, might be annoying to the user.
setInterval( function(){ document.body.scrollTop = 200 }, 500 ); // set your time
A more elegant solution would be to disable scrolling when that method is called (to scroll to the position of 220 from top or whatever), and re-enable it whenever the appropriate action has been taken by the user etc... jQuery example:
$('body').css('overflow', 'hidden'); // removes scrollbars entirely
$('body').css('overflow', 'auto'); // re-enable scrolling
Otherwise use setInterval() with a very short interval like 10ms to repeatedly fire your scroll function. If you are going to do this it would be wise to add some logic to see if the window is already scrolled to approximately the right position (allow for +/- 10px or something) so it isn't extremely jarring for the user.
The best way I've seen on some sites (like twitter I think or facebook when an image pops up) which is to set the overflow property to hidden on the body element. This prevents any scrolling so all you need to worry about is the position of content when you do that.
I guess you would need to wrap the content in some sort of container element and when you change the overflow of the body element you also set the y-coordinate of the container to reveal the specific area of the page being looked at.
This is by far the best thing I have seen to achieve that effect because it doesn't require timers etc.
You could add a event listener for the scroll event, and then set the position then.
I know this has probably been asked before but I couldn't find the right answer.
I'm trying to have a link, when you click it, scrolls the page to an element with an ID, with just javascript, and I get to control the speed.
I know about:
document.getElementById('youridhere').scrollIntoView();
and that didn't work. It just snapped into view. I also tried scrollBy but that didn't work since it works in increments. I can write it up to check the remaining distance to the element and if it's less than the increment, then only move what's left, but that seems way too bulky.
I tried scrollTo as well but that wasn't helping much either.
Is there a cleaner way of doing this?
This needs to be javascript only. Here is a jquery equivalent:
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
There is no built-in way to smooth scroll. I would use setInterval and scrollBy an increment on each iteration, then clearInterval when done.
You could also check the jQuery source to see how they do it.
I have written a scroller function which will scroll one div inside another one. The idea is to use the setInterval method to change the margin of the inner element to simulate a scrolling div.
The problem I am facing is that the scrolling is not entirely smooth. Sometimes it stops for a split-second and then it resumes. What can I do to remove these random hiccups? (I am moving 1px per 20 milliseconds)
three comments that might make an answer:
i see you are already using jQuery. it has scroll functions that have been smooth for me.
have you tried fractional positions? as in scrollerMarginTop -= 0.7;
also, you should probably clearInterval() unless the user can move the div and you want it to resume scrolling back into place.
if it works great until you interact with it, consider clearing the interval and waiting until interaction occurs and re-intervaling.
hth
It was quite some time ago that you asked this question, but if you haven't found a working solution you could try Smooth Div Scroll which is a jQuery plugin that does exactly what you describe: scroll one div inside another one.
What I want to do is scroll down the window when I expand elements in my page.
The effect I am trying to achieve is like the Stack Overflow comments. If it expands beyond the page, it scrolls down to fit all the comments in the window.
What is the best way of doing this?
Edit: I am using JQuery.
This jQuery plugin worked well for me:
http://demos.flesler.com/jquery/scrollTo/
If you have the advantage of using Prototype, you can use $(element).scrollTo().
Otherwise, the general idea is to calculate the cumulative offset of the element, then set window.scrollTop (and window.scrollLeft) accordingly.
You can do it nicely with Scriptaculous (built on top of Prototype):
new Effect.ScrollTo('someDiv',{...some parameters...})
It gives you finer control than Prototype alone (delay before start, duration and callback events (such as afterFinish) that allow you to trigger other effects or whatever you choose. You can make it scroll smoothly and nicely, so the page doesn't suddenly jump.
If you know what the next element in the source is you could actually just jump to that element (location.href="#..."). This would use the browser's native 'scrolling' and not use any libraries.
You could use this code wich is okay but not perfect.
Based on the suggestion by blonkm
function scrollTo( Selector ){
$(Selector).before("<a name='scroll' id='scroll'></a>");
document.location.hash = 'scroll';
$('scroll').remove();
}
This should work.
Requires jQuery but you already say your using that.