CODEWITHSUNDEEP
javascriptjquerywebscroll
WolVes
WolVes

Reputation: 1336

Using jQuery to open page at the bottom.

I am trying to make my page open so that the first thing the viewer sees and continues to see is the footer and bottom of the site. Its a reverse site, so the user scrolls up instead of down, you can check it out (Note it is in very ruff stages right now) Sean-Holt.com (this is my own site and not some trick for free hosting)

I currently have it set up with a Body tag, which works, but it just looks sloppy and is slow.

I was told jQuery would be the best way of handling this, but i dont know javascript at all and have been watching tutorials all day and searching for a way to implement this and found nothing.

Pleas help, Thank you very very much! (note. for clarification, I want the page to open at the picture of the world and scroll up)

Upvotes: 0

Views: 5066

Answers (4)

r0m4n
r0m4n

Reputation: 3512

You must first include JQuery in your HTML document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

And inside a tag include the following:

$(function(){
    $('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 300);
});

Change "300" to your desired timing in milliseconds

Upvotes: 2

Adrien Schuler
Adrien Schuler

Reputation: 2425

This JavaScript snippet :

window.scrollTo(0, document.body.clientHeight);

Will set the scroll bar to the bottom without animations.

Upvotes: 2

JayDee
JayDee

Reputation: 1643

Ariel Flesler plugin is simple and easy to use: http://flesler.blogspot.co.uk/

Place a unique ID in your img src:

<img id="earth2" src="http://sean-holt.com/wp-content/uploads/2012/03/Earth2.jpg" />

Call the downloaded plugin after jQuery:

    <script type='text/javascript' src='http://sean-holt.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
    <script type="text/javascript" src="/js/jquery.scrollTo.js"></script>
    <script type="text/javascript">   
    $(document).ready(function() {
     $.scrollTo('#earth2');   
    });
    </script>

Upvotes: 0

Kristian
Kristian

Reputation: 21840

for a javascript only solution, try using the window.scrollTo() method.

http://login2win.blogspot.com/2010/07/javascript-scroll-to-bottom-of-page.html

Otherwise you can try autoloading a particular url hash (aka anchor) and setting the anchor name tag at the bottom of your code.

Upvotes: 0

Related Questions