I have this code:
function Scroll(aid){
var aTag = $(\"a[name='\"+ aid +\"']\");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
But the problem is, that it scrolls down to the tag, so it is in the top of the window. I did like to have it, so it only scrolls to the element so it is in the bottom of the window.
So you can see what is on top of the element (like all the other content above it).
Any ideas?
Find out how high the viewport is, and substract that:
var pos = Math.max(aTag.offset().top - $(window).height(), 0);
$('html,body').animate({scrollTop: pos },'slow');
You might need to add a small offset.
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
}
});
I have three sections on my page, from top to bottom, A, B and C. You click on a button in section C. Now, some content is loaded in section A (above the button you clicked on), e.g. the content uses jQuery's slideDown() method.
Now, section C scrolls a little bit down (because the new content is making it do so). That's what I'd like to prevent. Is there a way that the browser automatically scrolls page to be at the exact same position as before the content loaded?
If you want to make sure that the button does not move on the screen at all, even though content is added above it, this should do it:
$("mybutton").click(function() {
//Save the vertical position of the button before content is added.
var x1 = $(this).offset().top;
//Do whatever the button is suppose to do, including adding the new content.
doAllTheStuff();
//See how much we moved.
var x2 = $(this).offset().top;
var dx = x2 - x1;
//Scroll the same amount to keep the button from moving on the screen.
$(document).scrollTop($(document).scrollTop() + dx);
});
If you are using this functionallity a lot on your page, you might want to wrap up the code a bit nicer. Here is a working JSFiddle.
This might also be interesting reading:
http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
Maintain page position while page length changes
jquery - keep window from changing scroll position while prepending items to a list?
You can scroll page to element when click on your button (probably your element).
$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000);
Here an example: https://jsfiddle.net/kmser1uh/
UPDATE
A trick for scroll in the same exactly position is to save the offset of the element in the page after the scroll, and animate the scroll after button click.
The updated example:
https://jsfiddle.net/kmser1uh/2/
This is the save part:
var el;
var elPos;
var clr;
$(window).scroll(function(){
clearTimeout(clr);
clr = setTimeout(function(){
$('.fullWidthBodyElement').each(function(){
if ($(window).scrollTop() > $(this).offset().top &&
$(window).scrollTop() < $(this).offset().top + $(this).height()) {
el = this;
elPos = $(window).scrollTop() - $(this).offset().top;
}
});
},500);
});
And this the resume position:
$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);
You Migt be using # in href attribute in anchor tag usejavascript:void(0);then you page will not get scrolled.
I can't handle such a mind-breaker:
It's common approach to hide page scroll when a tall popup shows. But when you set overflow: hidden to html and body elements, the content automatically returns to it's top (scrollTop: 0). It's no problem to keep scrollTop position, and reset it on popup's disappearing. But if you use transparent mask, user will see unnecessary jump from current scroll position to the top. How to escape this?
In the current Chrome and Firefox, I can set overflow: hidden only to html element to reach what I want, but it's not working on mobile devices.
Maybe someone can propose a good cross-browser solution.
I don't think this should be happening. I would look at the popup code to see if it's the culprit sending the page to the top and using subpar css to position the popup element.
In any case, here's code that ought to counter the behavior you're encountering. Since I cannot reproduce the problem, I cannot test my proposed fix. I think you'll find though that your pop up will be scrolled away out of view.
function keepScroll(){
var x = $('body').scrollLeft() + $(document.documentElement).scrollLeft();
var y = $('body').scrollTop() + $(document.documentElement).scrollTop();
$('html').css({
'overflow':'hidden'
});
$('body').css({
'overflow':'hidden'
});
$(window).scrollTop(y).scrollLeft(x);
}
The sicky footer layout has html and body height equal to '100%'. And when you set overflow:hidden it crops all the content and returns it to the top position.
To avoid this, you should set html and body height to 'auto' if scroll exists (you should check it to keep sticky footer behavior)
function keepScroll(){
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'};
$('html, body').css(keepCSS);
}
See the fiddle, for live demo
Edit 1
This solution is still not working on mobile (overflow: hidden doesn't disable scrolling on iPad, the position 'fixed' fix for body throw the content to the top), so the issue is open
Edit 2
Find a fix, for mobiles. Maybe it isn't so clean, but works.
var scrollKeeper = (function() {
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'},
scrollTop = 0;
return {
keep : function() {
scrollTop = $(window).scrollTop();
$('body').css({'position': 'fixed', 'width':'100%', 'top': -scrollTop + 'px'});
$('html, body').css(keepCSS);
},
release : function() {
$('html, body').removeAttr('style').scrollTop(scrollTop);
}
}
})();
Tip: Of course in the real development you should use css classes to avoid removeAttr(style) etc.
Tested on iPhone and Ipad (iOS 8+).
The fiddle http://jsfiddle.net/m1eav032/5/
Question title might be bit confusing, but please have a look at this fiddle for more info.
I have a container with scrollbar and one element fixed left to it. When I am scrolling I would like to make fixed element content also scrolling. Here is the code
$('.parent').on('scroll', function(){
var top = $(this).scrollTop(), _top = $('.right').offset().top;
$('.left').animate({
scrollTop : top - _top
},0)
});
Please refer to fiddle for demo.
This is working but there is some non uniform scrolling and I am unable to fix it.
I think the extra subtraction of _top is causing the uniformity issue, since it is recalculating the offset top each time, and continually subtracting it.
$('.parent').on('scroll', function(){
var top = $(this).scrollTop(), _top = $('.right').offset().top;
$('.left').animate({
scrollTop : top
},0)
});
Appears to let the scrolling be more uniform, minus some padding issues.
I've got a solution for keeping a sidebar in the viewport as you scroll up and down the page. Problem comes in when the sidebar is longer than the content area, and you keep scrolling you get this jittering effect as the sidebar keeps pushing the footer down.
I've got an example of this setup in jsFiddle: http://jsfiddle.net/U9F7w/2/ (full screen: http://jsfiddle.net/U9F7w/2/embedded/result/ )
My question is, is there a way to make the sidebar stop once it touches the bottom/footer area?
I've read some solutions about setting the sidebar to absolute, unfortunately it's an existing site and changing the position didn't work and messed with a lot of the existing page elements.
Here's the jQuery/js I'm working with:
// set the offset
var sidebarOffset = $(".sidebar").offset();
var sidebarPadding = 15;
// when the window scrolls, keep sidebar in view
$(window).scroll(function() {
if ($(window).scrollTop() > sidebarOffset.top) {
$(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding });
}
else {
$(".sidebar").stop().animate({marginTop: 0});
};
});
edit
One thing I thought about was (not sure if this is possible) to detect if the bottom of one div was lower than the bottom of another, stop the scrolling. Is there a way to detect if the bottom of one div is lower than the other?
Check if the sidebar's height is greater then that of the content:
var ct = $(".content");
var sb = $(".sidebar");
var sbOffsetTop = sb.offset().top;
var sbPadding = 15;
$(window).scroll(function() {
if (sb.height() < ct.height()) {
if ($(window).scrollTop() > sbOffsetTop) {
sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding });
}
else {
sb.stop().animate({top: 0});
};
};
});
See demo fiddle with large content and demo fiddle with large sidebar.
And I don't know why exactly, I would use top in conjunction with position: relative, but marginTop works also fine.