I've already created the #scrolldownbutton to scroll to the first component but what I'm initially trying to do is when the button is clicked the page scrolls within the viewport and stops on the partially visible component at the bottom of the view port in which the button should appear at the the top of the visible component and the bottom of the viewport each time the button is clicked.
Here is what I have so far Please if anyone could help this would be amazing.
$(document).ready(function() {
$("#scrollmorebutton").on("click", function() {
console.log("scrollmorebutton was clicked");
//jquery smooth scroll code here
$('html, body').animate({
scrollTop: $("h2:contains('New Programs')").offset().top
}, 2000);
});
});
Might not be anything near what you're asking for as i'm not entirely sure I understand. But here's a fiddle with some example code
https://jsfiddle.net/cf3q2zo9/
Related
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'm adding a back to top button fixed to bottom of the browser window. When clicked, it scrolls to top in desktop and Android, but not iPhone. On the iPhone, the scrollTo event reveals the address bar and the bottom mobile button bar, but does not return the user to the top of the page.
EDIT: The address bar and button bar on the iPhone appears when a touch event occurs within 20-30px of the bottom of the screen. This is why this back to top button doesn't work. Moving it 40px up stops the address/button bars from appearing.
I've attempted to just place it raw:
$('#scroll-to-top-button').on('click', function() {
window.scrollTo(0,0);
});
And with a timer:
$('#scroll-to-top-button').on('click', function() {
window.setTimeout(function() {
window.scrollTo(0,0);
}, 500);
});
I tried using scrollTop, which had the same results: browser button bar and address bar appear, but no scroll.
I also tried initiating the scrollTo and at the same time setting a timeOut with another scrollTo. The timeout never fires.
I did also try scrolling html or body, or a combination of the two:
$('#scroll-to-top-button').on('click', function() {
$('html,body').animate({
scrollTop: 0,
}, 200);
});
Only html
$('#scroll-to-top-button').on('click', function() {
$('body').animate({
scrollTop: 0,
}, 200);
});
only body
$('#scroll-to-top-button').on('click', function() {
$('html').animate({
scrollTop: 0,
}, 200);
});
I've tried resetting the button to an anchor tag and trying to get it to link within the page. This doesn't work with just basic html anchor functionality:
<div id="main-body"> ... lots of content forcing scrollbars to appear ... </div>
<a id="scroll-to-top-button" class="btn btn-default" href="#main-body">Back to Top</a>
And tried preventing default and animating the link to the anchor:
$('#scroll-to-top-button').on('click', function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0,
}, 200);
});
Here's a link demonstrating the problem. In this link, the code is using one of my last examples down this question, where it's purely an anchor tag trying to link to top of page.
http://willanni.com/dev/iphone-scroll/
I thought maybe missing the viewport tag might be causing it, so I added the following: <meta name="viewport" content="width=device-width, initial-scale=1">. However. When I add that in, it still does not make it work.
Besides forcing the address bar and button bar to always be visible in iPhone, is there a way to get this to scroll to top of window in iPhone? (Note: iPad doesn't have this issue, though it had a different weird issue that required the timeout to fix. Different story though)
Try using jQuery animate on body and html:
$("BODY,HTML").animate({
scrollTop: 0
}, 100);
// second parameter is time so adjust it if you please
The answer is that there really is no way to do this without forcing the address/buttons bar to be always visible.
The iPhone captures any touch event within about 20-30px of the bottom of the screen, and displays the address and bottom buttons bar. No page script, button, or links are triggered or registered as touched until the bar is revealed. A position: fixed, bottom: 0; button then is not able to be activated until the second touch:
First touch reveals the bottom button bar (and address bar)
Second touch activates whatever button/script/anchor functionality is in place
Adding an event listener to the window doesn't capture a touch event in that area of the screen while the button bar is hidden. For example, in order to test I set a timeout to allow myself a bit of time to scroll down and hide the bottom bar. In all areas of the screen except the bottom, this worked:
window.addEventListener('touchstart', function() {
setTimeout(function() {
alert('touchstart');
}, 500);
});
In that bottom region, nothing.
So, in effect, to have a button attached to the bottom of the screen work on first click, you'll need to apply some hacky css to the body and html tags to force the address and button bars to always appear:
html,body {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
height: 100% !important;
}
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');
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/