I'm trying to have it so when the user clicks a link it scrolls down so that the blue area is off the top of the page.
This is my jsFiddle
I think the code would be something like this:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $("#jumbo").offset().bottom
}, 2000);
});
However it doesn't seem to work. Can anyone tell me where I have gone wrong please?
offset() only exposes the top and left properties. To get the bottom you need to add the height to top:
$('html, body').animate({
scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);
Updated fiddle
Also, note that in your example jumbo is a class, not an id.
I think you're looking for scrolling to the first .midheight div:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $(".midheight:eq(0)").offset().top
}, 2000);
});
Updated Fiddle
You don't need to use jQuery for this, you can simply use anchors.
Anchors are links but with hashes, for example:
<a name="scroll_down"></a>
These can then be targeted with a normal link, but set out like this:
Clicking the link will scroll you down the page to where the anchor is put in your HTML.
For the slow animation that you're after, you can look here and use his code. All credit to him for the code, works great.
Here is your updated fiddle
The good thing about this, is you can easily use to it have links to each of the "features" you had in the fiddle and have an anchor above each so the user can scroll down to the appropriate are easily, and without the need for you to have repeating jQuery code.
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 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 want to achieve some kind of smooth scrolling, so I made this script:
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).offset().top
}, 500);
return false;
});
The problem? When I click on the 'a' the offset.top() value changes in another weird value and toggle between them? Why does this happen and how do I resolve it?
http://jsfiddle.net/StartStep/9SDLw/2947/
I think the problem is with the scroll.top() that gets the value in another way...
jsfiddle.net/9SDLw/2950/
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).position().top
}, 500);
logit('Anchor: '+sclink+'; Offset top value: <b>'+$(sclink).offset().top+'</b>')
return false;
});
Use position instead of offset.
The reason is offset is relative to the viewport, as such it looks like you've scrolled too far, but this is because the top of your viewport area is being obscured by your layout, so offset is actually not what you want, instead, position is.
You should also add a reference to stop before calling animate to ensure if a user clicks in quick succession the behaviour is as expected (the animation queue is essentially flushed)
With that in mind your HTML also needs some work- the clickable link hasnt got closing tags for example.
Change your scrolling code to:
$('.menu').stop(true,true).animate({
scrollTop: $(sclink).position().top
}, 500);
Demo Fiddle
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();
});
how can I get this scroll back to the top neat thing from this link , just scroll down a bit, you'll see in the bottom right icon(top pointer) that scrolls back to the top on click. Thank you
In jQuery:
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
You can then make links like this:
Back to the top
You can find the script here:
http://www.javascriptkit.com/jkincludes/scrolltopcontrol.js
Although you need to use jquery for this script to work.