jQuery jump to element - javascript

I've something like an image gallery on my site. By clicking an image this one will scale up. Sometimes the enlargement contains that a part of the image is out of the viewport. Is it possible that the complete site jumps to the top area of the image by clicking it?
You can have a look here!

Try this:
$("div.image img").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
It should create a click event for all the images inside the div element with a class "image", which I can see in your code, and then animate (slowly, in 2000 miliseconds, aka 2 seconds) scroll to it's offset from the top of the page.
You have more information in this 5 year old question on stackoverflow.com
edit:
if you need some adjustment, you can edit this line
scrollTop: $(this).offset().top - 88
and the page will scroll 88px less than the image position, which you could find helpful because of your floating menu.

Related

Scroll page until a div reach the navbar

I need scroll my page when my user click in a button
I'm using the following code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
But, with this code, my page scroll until the div is found and get the top propertie, and I need that this div reach a specific .offset().top, i.e. scroll a little bit more until reach my fixed navbar.
How can I make this using scrollTop ?
Grupo Produto - Ticket Médio is the title of the $("#divTicketMedioGrupoProdutos"), look that right now is so close of my navbar because I scroll the page. I want this when my user click in a button.
UPDATE
Look at the image below, when I click on the green bar in the chart, generate a new graph;
And in the image below, with the code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
you can see that the page scrolls but the new div are in the middle of the page because didn't scroll so much (with the code)
What about adding additional pixels to your .offset().top() call?
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top() + 70
}, 'slow');

Move html & body up to top when img is clicked

I have images that when clicked, resize. However, I would like it so that no matter how far the user scrolls, when an image is pressed the html and body will move to the top. I added an animation to the resize script but it seems to not be recognized.
$(".images img").on('click', function () {
$(this).toggleClass('selected');
$('html,body').animate({
scrollTop: $('.active').offset()
});
});
Code: http://jsfiddle.net/qSDP5/
EDIT*
I put a sticky header to the top of the page and used
$('html,body').animate({
scrollTop: $('#sticky').offset().top
});
But it doesn't seem to want to scroll to it.
It's because not only you don't have any element with the class of active, but also you are not defining the coordinate direction of that element you want to access, because of that your script doesn't scroll to that.
change this line :
scrollTop: $('.active').offset()
to this if you want to scroll to the top of the page
scrollTop: 0
or you can scroll to an element which resides in your html something like:
scrollTop: $('#header').offset().top
see this: http://jsfiddle.net/qSDP5/1/

jQuery - Scroll to moving div

I have 50 record of data in div elements and I just see 10 at the beginning, the other 40 are display: none. When I click to the next, then the next button scrolling down and 10 new div will be visible. The problem is that, if I open more record, what can be visible on the screen, then the next button runs out of the screen.
So when I load the page first time the distance of the next button from the top of the page for example 300 px. Then I click on next and this distance will be 600 and finally runs out, but the page should scroll to the bottom position of the next button. An other problem is that, at the end not always 10 record will appear, so a static method for the problem can't be correct.
So this for example almost good:
$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
But at the end, when there are less then 10 record it scrolls down with 10 and just for the next click (when there is no element) will scroll down with the proper height.
Are there any method to scroll down always to the bottom of a div even if the div is moving? It would be better without any plugin.
Here is more code:
HTML:
<body>
<div id="content">New elements appears here if there was click</div>
<div id="next-button">Next 10</div>
<div id="footer">Lot of data</div>
</body>
Js:
$("#next-button").click(function() {
//Scroll down the new results and after:
$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
});

Scroll textarea upwards/downwards on clicking prev and next hyperlinks in web page

I want to show a hyperlinks "prev" "next".
Clicking on "next hyperlink should scroll textarea to next location.
Clicking on "prev" hyperlink should scroll textarea to previous location.
The locations to jump in textarea are known e.g. line: 10, then line 40 , 50 , 70 , 101 , ....
textarea has a fixed height.
You can use pagination.
I prefer using styled pagination with jquery-
http://flaviusmatis.github.com/simplePagination.js/#page-20
This will help you sure.
As per need you want to go next, you need to give position for your current text-block or you can use margin property.
Try this out :- http://jsfiddle.net/MCK8g/
$(function(){
$("#prev").on("click",function(){
$("html, body").animate({ scrollTop: -500 + window.pageYOffset }, 600);
});
$("#next").on("click",function(){
$("html, body").animate({ scrollTop: 500 + window.pageYOffset }, 600);
});
});
Change the factor "500" depending upon the required scroll.
Googled, first hit..
function scrollToLine($textarea, lineNumber) {
var lineHeight = parseInt($textarea.css('line-height'));
$textarea.scrollTop(lineNumber * lineHeight);
}
https://makandracards.com/makandra/8247-scroll-a-textarea-to-a-given-line-with-jquery
(the solution is using jQuery)
as mentioned their it only works if the line-height is set in pixels,
if not, a link with a workaround is also given in the post, see
jQuery: scroll textarea to given position

HTML Anchor Link - Offseting Position

I have Created an Example Page Below:
http://glustik.com/glustik2/index.html
When you Click the First Two Links you can see how the Anchors Position to the top and not down (250 or so Pixels).
Is there a way to summon the anchors to a certain location on the window?
Thanks.
You can use the jQuery animate function to set the scrollTop to the wanted position.
$("html, body").animate({ scrollTop: $("#your-div").offset().top - YourHeadersHeight }, 500);

Categories