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/
Related
I am trying to get my page to scroll back to my top anchor smoothly like it does when I go down to my bottom anchor. However instead of scrolling smoothly, it jumps without any animation.
Could someone assist me in pointing out what I can do to make it scroll smoothly both ways?
JavaScript
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
JSFiddle
The ID of the <a href="#myAnchor" name="topAnchor" id="anchor1"> is wrong, set it to id="topAnchor" and it will work nicely.
If you target the top anchor by id instead of by name, it will scroll smoothly. (It had an ID of anchor1.) See the updated fiddle:
http://jsfiddle.net/freginold/atg8xcyd/1/
This is the updated HTML code for the top anchor element:
<a name="topAnchor" href="#myAnchor" rel="" id="topAnchor" class="anchorLink">Link to the anchor</a>
I have done this with JQuery. As a function it is reusable:
function goTo(goToElement) {
$('body').animate({scrollTop:$(goToElement).offset().top}, 1500);
}
In any HTML element just set onclick="goTo('#id_to_goTo')" and it will smooth scroll to the element id you passed in either up or down.
I'm trying to display a div after scroll animation has finished and hide it when I scroll up/down the page. This is my attempt:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = parseInt($('#services').offset().top);
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
});
});
it doesn't work. the active class is removed after animation has finished and not with scroll movement.
Any idea?
Thanks in advance
Not exactly sure why, but apparently it takes the window somewhere around 20 milliseconds to exit the scroll state, at least on Chrome, on Windows. Or it might be a jQuery trick to fire the animation function 20ms sooner, so it feels more natural. (Human eye and mind make connections that take tiny amounts of time and maybe they took it into account).
Anyway, in order to make sure you bind after the scroll has ended, give it a full 100ms to finish and bind afterwards:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = 120;
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
setTimeout(function(){
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
},100)
});
});
working fiddle.
Please note I had hard-coded a value to position, as #services is not defined in my example.
Also please note that hiding events on scroll is a really bad idea in terms of usability. Users might want to scroll so they view the div better or read it in full, but they will end up hiding it, which would be annoying. I would at least check the scroll event for a minimum velocity or distance in order to hide an element from the screen.
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/
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/
I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section?
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo
You can use scrollLeft and offset() to determine what to scroll to:
A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):
$(".next").click(function(e){
$('html, body').animate({
scrollLeft: $(this).closest('td').next().offset().left
}, 1000);
e.preventDefault();
});
I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.
If you didn't want the animation you could do it this way:
$(".next").click(function(e){
$('html, body').scrollLeft($(this).closest('td').next().offset().left );
e.preventDefault();
});