I am trying to scroll down to some element when clicking on a button. But it isn't working.
The way I am using to do that is using query:
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
console.log('ios');
$("html, body, .wrapper").animate({
scrollTop: offset
}, 500);
} else {
$("html, body").animate({
scrollTop: offset
}, 500);
}
Those cases are almost the same, just read somewhere that animate is not working on html and body tags on ios.
However still can't make it work.
This is inside:
$(".elem").click(function () {
var offset = somenumber;
//and the code above
});
The way I've fixed it, is that I used jquery plugin called postMessage, which is a good way for cross-domain frame communication.
http://benalman.com/projects/jquery-postmessage-plugin/
Related
I've got a problem with my jQuery.
I want to scroll my site by clicking button with class "my-name" in my header:
<header>
<button class="my-name"></button>
</header>
to a
<section class="about"></section>
I gave position relative to both header and section, and put height: 100vh;
this is my jQuery code:
const $nameBtn = $(".my-name");
const $about = $(".about").offset().top;
$nameBtn.on("click", function() {
$("body").animate(
{
scrollTop: $about
},
1000
);
});
I've tried using console.log to see if my code works, and it should.
I see my variables.
I've also tried using id's not classes, but it didn't make a difference.
I'm just starting with jQuery, do you have some ideas, why it doesn't wokr?
Change your code to
$("html, body").animate({
scrollTop: $about
},1000);
You need to use $('html, body'). You need to use both html and body to ensure compatibility with some browsers because some browsers set scrollTop on body, while others set it on html
I have this piece of jquery to scroll the page up to the top. It's not scrolling at all.
I've tested it using an alert() and it is triggering - so why isn't it scrolling to the top?
$(document).on("click",'.campaign-stats', function(event) {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Please note that the page does contain content inserted using AJAX, but I don't see how that would stop it scrolling to the top?
I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
The context: I have a one page web app. So there's lots of div's being hidden at any one time (I'm not sure if this matters). What I am finding is that when a user is finished with one page (Page X), then they click back (to Page Y) - if they return back to Page X then the position is the same as when they left the page. The back button is at the bottom, so that's where the user ends up again.
What I want, is when they return to Page X for them to be at the top of the page so they can start again. Whether it scrolls back or just jumps back - either way is fine.
I've tried all of the following with no success:
// Scroll to top
setTimeout(function(){
alert('scroll');
$('html, body').animate({scrollTop : 0}, 2000);
}, 2000);
Adding a div with the id top-anchor at the top and using:
$('html, body').animate({
scrollTop: $("#top-anchor").offset().top
}, 2000);
Having a and using an anchor, with the code below (it only works once though, after that as the hash is already in the URL it no longer works I suppose):
document.hash = '#top-anchor';
Also tried:
window.scrollTo(0, 0);
No luck.
Any alternative ideas are much appreciated.
You can achieve something like that: DEMO : https://jsfiddle.net/yeyene/bpwtLg1w/1/
Not sure how your content divs are shown and hidden, but just get the idea of adding scroll to top of page div part.
Add scroll event on Back button click event, since you already known which page to go, you can scroll to this page's top, by using...
$(element).position().top
JQUERY
$(document).ready(function () {
$('input[type=button]').on('click', function(){
getPageID = $(this).attr('id');
$('.page').hide(0);
$('div#'+getPageID).show(0);
$('html,body').animate({
scrollTop: $('div#'+getPageID).position().top - 10
}, 500);
});
});
I have a html page with a form and a anchor tag at the end of the page that scroll when clicked scrolls back to the top of the page with a smooth scroll implemented using javascript.
The problem I am facing is that the scroll is jerky. There is a slight jerk before it proceeds to scroll. This doesn't happen in jsfiddle though.
I am not sure if it is because of the anchor tag or JS. Is there a way I can fix it by changing/styling anchor tag to regular text. I believe the problem is something to do with the anchor tag. I am not sure though.
Thanks
alert("Scroll triggered");
$('a[href="#register"]').click(function(){
$('html,body').animate({scrollTop: '0'}, 1000);
$('input#Name_First').focus();
});
JSFiddle: http://jsfiddle.net/BrianDillingham/co1ot6ru/7/
Your JS fiddle uses the code
$("html, body").animate({ scrollTop: "0px" }, 1000, function(){
$('input#Name_First').focus();
});
If you change it to the code provided in the question
$("html, body").animate({ scrollTop: "0px" }, 1000);
$('input#Name_First').focus();
It also jerks;
This shows that the issue is - the "focus" needs to be in the callback for the animation.