How can I jump to the bottom of the page with jQuery?
I don't want a smoother animation, just to 'jump'. All the other questions on this site I found seem to involve an animation.
This will do
$('html, body').scrollTop( $(document).height() );
scrollTop( vHeight );
WITH ANIMATION
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
WITHOUT ANIMATION
$('html, body').scrollTop( $(document).height() );
$('#smthn').scrollTop(99999999999);
99999999999 is the max input for jquery and it can take element to the last scrolling position.
You can use an anchor tag for this, no need of jquery.
Put an anchor tag at the bottom of the page just before </body> tag. such as
<a name="pageend"></a>
And, from where on the page you can jump to the bottom, put another anchor tag just like this.
Jump to page end
Related
I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?
window.scrollTo(0, 0);
you need to try this.
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 want to create a webpage like http://seller.flipkart.com . I want to scroll my page first from up to down and then left to right using scrolling button only and background drawing. Can you tell me how can i do this and which languages should i learn?
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");
The effect you are talking about is known as parallax effect.
Use this skollr plug-in (demo link : http://prinzhorn.github.io/skrollr/)
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.
I have Created an Example Page Below:
http://glustik.com/glustik2/index.html
When you Click the First Two Links you can see how the Anchors Position to the top and not down (250 or so Pixels).
Is there a way to summon the anchors to a certain location on the window?
Thanks.
You can use the jQuery animate function to set the scrollTop to the wanted position.
$("html, body").animate({ scrollTop: $("#your-div").offset().top - YourHeadersHeight }, 500);