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);
});
Related
When I click on accordion tab, it goes to bottom of the page due to difference in amount of content and height of the content.
I used this code to send page to top, but its scroll the page to bottom first then animate it to the top, which looks weird.
$('#accordion').on('shown.bs.collapse', function () {
window.elenow = $(this);
$("html, body").animate({ scrollTop: $(window.elenow).offset().top }, 500);
});
I just want to page remain still when click on accordion tab, no go to top no go to bottom, just stay where its clicked.
You can prevent scrolling all together by changing your href to href="javascript:void(0);"
Here is a fiddle that shows the example.
I have a question about a tiny JS that I have put at the bottom of the page. The script scrolls to another div when the user clicks on one div. On my website there is a contact button (example below).
<div id="contactbutton"></div>
When the user of the website clicks on this div, the page scrolls down to another div on the page with a contact form on it (example below).
<div id="contactform">
<form>
(form content here)
</form>
</div>
I did that using the following JS code at the bottom of the page, that will scroll to the other div:
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top
}, 500);
});
</script>
The code works perfect, but problem is that I have a fixed div header on my website that is on top of everything on the page. When the user scrolls to #contactform, a part of this contact form div is behind this header.
I am looking for a way to scroll to #contactform. But instead of scrolling all the way, I want it to scroll till it's a certain amount of pixels away from the top of the browser window so it will show below the header and not behind it.
I hope somebody can help me out! Thanks alot in advance.
Elmigo
You want to substract the height of your sticky header from the scroll distance, something like this (#fixed-header is an id of your sticky header):
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top - $('#fixed-header').outerHeight()
}, 500);
});
</script>
You could substract the height of your header so the scroll will stop a few pixels before your content leaving some spaces for the header
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top - $('#header').height()
}, 500);
});
</script>
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.
I have arrows in the center of my web pages at the end of sections and I was these to allow users to scroll to the next section on click. I have the following code where the first click works but subsequent clicks do not scroll even though the function is being called each time.
$('.scroll').on('click', function(event) {
alert('scroll');
$('html, body').animate({
scrollTop: $(".scroll").offset().top
}, 1000);
});
Can anyone assist? https://jsfiddle.net/avL459sm/2/
You should use current .scroll element you clicked on.
Look at this fiddle: https://jsfiddle.net/avL459sm/3/
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');