Scroll to top using jquery not working? - javascript

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?

Related

smooth scroll does not work with overflow-y

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;
});

re stylign anchor tag to remove jerky scroll

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.

how to keep scroll bar always to bottom of page

to keep scroll bar always at the bottom of the page i used
$(document).ready(function() {
$(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
It is working in the Firefox but it is not working in the chrome.
Why it is not working in the chrome can anybody suggest me the good solution to keep the scroll bar always at the bottom of the page.
Thanks for any help
If you want to move back to the bottom of the page even if the user attempts to scroll up, you are going to need to call your function on an interval.
$(document).ready(function() {
function scrollBottom(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
}
setInterval(scrollBottom, 500);
});
You can play with the interval to get the desired amount of UI interactivity.
Alternatively, you could bind to the scroll event, this will fire whenever the user scrolls.
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});

How to use scrollTop in jquery when linking to a new page

I have the following code to smoothly scroll between links on a single page:
$(".navbar .nav a").bind('click',function(event){
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - (90) + "px"
}, {
duration: 1200,
easing: "easeInOutExpo"
});
return false;
event.preventDefault();
});
This works fine when the links are clicked on the same page. However, when they are linked to exernally:
The offset doesn't apply; and
The page doesn't scroll.
I would like to fix this by navigating to the new page, starting at the top and then scrolling down to the anchor. How can I achieve this?

Jquery Expanding div - How to scroll to it

Basically I have a docked footer on my site, which sits at the very bottom of the page. I then have an empty div "country_slider" which sits under it, and this can be expanded with jQuery's show and hide functions. The trouble is this, the footer div is already sitting at the bottom of the page via a CSS hack, so when the "country_slider" div expands, it simply goes off the bottom of the page.
I want the div to not only expand, but the page to also scroll down to make it visible. Can anyone tell me the easiest and most hack-free way of doing this?
This is the code I'm using to show the div:
$("#country_slide").show();
$("#country_slide").show(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});
without an animation:
$("#country_slide").show(function() {
$("html, body").scrollTop($(document).height());
});
Use:
$('#country_slide').show(function() {
$('html, body').animate({
scrollTop: $("#country_slide").offset().top
}, 2000);
});

Categories

Resources