I am trying to create a page which contains a bunch of blocks (that would usually contain 'overflow: hidden' text that can be expanded by clicking on the box). But when I click on the box to adjust its height (to show all the text) I also want to bring that box into focus by using ScrollTop. It looks weird if you click on the box to expand its height if it remains out of view within the browser window.
I have a jQuery function that animates the height change and animates the ScrollTop repositioning nicely, however it often looks very choppy to me. It's not consistent. Sometimes it's pretty smooth, other times it'll adjust the box's height and then very abruptly scroll, which has a very unpleasant herky jerky effect. Adding to the odd behavior, is that I cannot scroll the window manually using my mouse for several seconds after the function completes. It's as if it's blocking manual mouse scroll.
I've created a little jsfiddle (sans text that I would usually place inside the right-hand boxes).
jsfiddle
$(document).ready(function() {
$(".right").click(function() {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400, function() {
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 1000);
});
});
});
Maybe I am misunderstanding you, but the way you have it set up, the height will change, and then after it completes, it will move the scroll position, at a slower speed even.
Don't you want to do these at the same time and speed, instead of sequentially?
$(".right").click(function () {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400);
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 400);
});
Demo: http://jsfiddle.net/NpdDN/
Also, this will essentially "block" mouse scroll during the animation, because it is continually setting an absolute scroll position, overriding anything your mouse does.
Related
The problem is that my scroll function is not scrolling properly on different screen resolutions. Problem is coming from the offset. Is there any way to have offset in percents? I've tried -10% for example but it didn't worked.
$(".scrollto_home").click(function (event) {
event.preventDefault();
var defaultAnchorOffset = 0;
var anchor = $('#home').attr('data-attr-scroll');
var anchorOffset = $('#home').attr('data-scroll-offset');
if (!anchorOffset)
anchorOffset = defaultAnchorOffset;
$('html,body').animate({
scrollTop: $('#home').offset().top - 100 - anchorOffset
}, 500);
});
The problem is that the scroll is going too far when going up on smaller resolutions that 1920x1080
You may try this way. Using timeout function
setTimeout(function(){
$('html body').animate({
scrollTop: $('#home')[0].scrollHeight
},400);
},600);
So let's say you want to scroll 10% (of the screen height) below/above the anchor. You simply set the offset like:
let percentage = 10;
let offset = window.innerHeight / 100 * percentage;
and then add or subtract that offset depending if you want to scroll above or below it.
To get good browser compatibility when getting the screen height, refer to this.
Note: I'm not that used to jQuery so tell me if I'm missing something
Note2: If you're having problems with your jQuery, please consider creating a working JsFiddle so I can test out stuff ^^ :)
I'm trying to scroll the page down when I click a button with an animation to a certain distance, currently, I'm able to scroll down to a certain element but this is not what I want, I want to scroll down to a certain distance in pixels.
I've tried lots of variation but they don't seem to work in my case, at least not how I want them to.
Anyway, here's the code:
$(document).ready(function(){
$('.next_section').click(function(){
$('html, body').animate({
scrollTop: $('.img_div').offset().top
}, 1000);
});
}
to a certain distance
I assume distance in pixels?
This scrolls down 150px:
var y = $(window).scrollTop(); //your current y position on the page
$(window).scrollTop(y+150);
#therealbischero (thanks!) mentions in a comment the missing part of my answer, how to make it smoothly scrolling:
var y = $(window).scrollTop();
$('html, body').animate({ scrollTop: y + 150 })
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 tried to scroll the div tag in the right side but this is not worked. But the scroll left function and scroll right with animation is perfectly works. But i want to scroll right without animation I tried code something like this
$().ready(function(){
$("#container").scrollLeft(500); //This works
return hus;
});
function hus(){
$("#container").scrollLeft(-200); //This is not work
}
But i want to scroll the right side without animation how can i do it?
I am not sure what you mean about "scroll right".
$("#container").scrollLeft(500)
scroll the div to the x-position of 500px (This works)
$("#container").scrollLeft(-200) scroll the div to the x-position of -200px, this is not a valid position since the minimum value is 0px, this is the left-most position, and you can't expect that it will "float" to the right side like a circle loop
scrollLeft: leftPos - 800 doesn't "scroll right" as you thing, it scroll the div element to the left, too
So, as I guest, there are 2 posible case that match your problem
Let's begin with:
var leftPos = $('#container').scrollLeft();
We suppose that:
leftPos = 1000, this is current x-position of the div
scrollWidth = 10000, obtain from $('#container')[0].scrollWidth
width = 500, obtain from $('#container').width()
If you want to move 200px to the right from current position, that is 1200, you can use:
$("#container").scrollLeft(leftPos + 200);
If you want to move to the right position that is "200px away" from the right side, that is 10000-500-200, you can use:
$("#container").scrollLeft(scrollWidth - width - 200);
Hope this can solve your problem. (Sorry, my grammar is not very well)
You can set a duration of 0 or 1 ms which would do the trick:
var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 0);
An element is set to the left side by defaults. In this sense, there's no way you can scroll the element "in the right side" (a.k.a. to the left) at the very beginning.
In your case:
1. $("#container").scrollLeft(500); //This works
This would work because you just move the element to the right side for 500px.
2. $("#container").scrollLeft(-200); //This is not work
This would not work since you are already on the left-most side, you are not able to scroll an element out of the outer box.
3. var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 500);
});
I am not sure what do you mean by "work perfectly" in this case, due to the lack of the context.
If what you want is to move the element "to the left" without animation, you may simply set $('#container').scrollLeft('200');
(since you already set the element to scroll to right for 500px at the very beginning.)
You may check on jsFiddle for the example. If you want to turn off the animation effect, you can just set the duration to 0.
I have this function
function first_scroll() {
document.getElementById('insert').scrollIntoView();
}
and this button
Button ID="finish" runat="server" Text="Finalize" OnClientClick="first_scroll()"
This button runs some code and I want the page to scroll after running this code. Right now, this scrolls down to the speicific div for less than a second and then after postback, it starts up in the top again.
To solve this, I tried using
<% Page MaintainScrollPositionOnPostback="true" %>
However, this had no effect.
So, how do I make the page scroll after running some code?
Thanks in advance!
First you want to bind a function as the image's click handler:
$('#someImage').click(function () {
// Code to do scrolling happens here
});
That will apply the click handler to an image with id="someImage". If you want to do this to all images, replace '#someImage' with 'img'.
Now for the actual scrolling code:
Get the image offsets (relative to the document):
var offset = $(this).offset(); // Contains .top and .left
Subtract 20 from top and left:
offset.left -= 20;
offset.top -= 20;
Now animate the scroll-top and scroll-left CSS properties of <body> and <html>:
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
});
Also, have a look at the jQuery.scrollTo plugin.
Here's a demo.
This is a repeating question from this page.