Efficient way of scrolling to part of page with jQuery links - javascript

I've asked for help in regards to a scroll identifier and now have this code working perfectly:
http://codepen.io/vsync/pen/Kgcoa
However, I was wondering how I can get it so when I click the links on the black scrollbar I can get it to scroll to that part of the page. I think it would be something along these lines:
$(".a1").click(function() {
$('html, body').animate({
scrollTop: $("#a1").offset().top
}, 2000);
});
The scroll identification bit of the JavaScript has been so refined that I was really hoping there would be an elegant and optimised way to make it so they can skip to bits of the page too.

Try this.
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: $('#'+sectionId).offset().top
}, 2000);
});
Fiddle Demo

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.

Jquery: scrollTop() is not set to a value

i am trying to scroll the page to the ajax loader gif in the page on the click of a link.
As shown below i am trying to scroll to the div with id "divWaitImage"
However scrollTop used below is not working when given the variable offs as parm.
var offS = $("#divWaitImage").offset().top;
$('html, body').animate({ scrollTop: offS}, 'slow');
However it works if i pass in a hardcoded value:
$('html, body').animate({ scrollTop: 500}, 'slow');
Can anyone please point out the error or a workaround , i am sure its something that i have missed.
thanks for any pointers in advance!
According to your current question this might be a good approach.
http://jsfiddle.net/rRsM4/1/
This is not true -> You need to make sure that you have a height set in the parent container. You can remove the height.
Updated version: http://jsfiddle.net/floradu88/rRsM4/2/
Html:
<div style="height:1500px;">
<img src="http://linux.m2osw.com/sites/linux.m2osw.com/files/images/waiting-wheel-300x300.gif" alt="image" style="margin-top:1000px;" id="divWaitImage"/>
</div>
JS:
var offS = $("#divWaitImage").offset().top;
$('html, body').animate({ scrollTop: offS}, 'slow');
P.S. I will update the answer if you provide updates to your question.

Smooth Scroll JQuery doesn't work smoothly in Chrome?

I am using this JQuery script for a vertical smooth scrolling effect. It works perfectly in Internet Explorer and Firefox but it's not smooth at all in Google Chrome's latest version??? How come? Should I change something in the script or is there another smooth scroll script that works nice and smooth across all browsers?
In Google Chrome, the smooth scroll effect actually jiggles and stops for a brief moment so that it all looks kinda ugly.
Here is the JavaScript/JQuery code:
(function() {
$('header ul a').bind('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
My HTML has 5 <section>'s and each section has it's own ID (Home, About, Services, Gallery and Contact) so there is nothing spectacular here. Thanks for help!

jquery - Animated return to top of page on click

I want to animate a scroll effect to take a user to the top of the page when clicking on an element. A bit like anchoring to the top of the page but smoother.
I've seen this done (can't remember where though).
Does anyone know how this can be done?
You want to .animate() the scrollTop property to 0, like this:
$("html, body").animate({ scrollTop: 0 }, 500);
you can try this:
$('#somewhere').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
You can put this code on document load, for example to animate to top
$("html, body").animate({ scrollTop: 0 }, 1000);
And you can animate to an especific element, like
$("html, body").animate({ scrollTop: $('.my-element').offset().top }, 1000);
I have used Ariel Flesler's localscroll plugin to do this many times... http://demos.flesler.com/jquery/localScroll

Categories

Resources