Change the email button to scroll to the bottom of page

Hi there,

I have spent about 3 hours now trying to figure out how to make the email button in the header to scroll down to the bottom of the page once clicked. I'm not using it for emails but rather I want it to scroll to the bottom of the page to the 3 products area located at the bottom. I trimmed it down to this and rewarded it to "Get Started Today!". I found this smooth scrolling jquery script (see bottom) but I'm not having any luck integrating it into my page.

<h1><strong>New brakes are now a click away!</strong></h1>
<p> </p>
<p> Title line </p>
<p> </p>
<h2><input type="submit" value="Get Started Today!" /></h2>

The jquery script:
http://www.electrictoolbox.com/jquery-scroll-bottom/

Any help or direction would be very much appreciated.

Thank you!

Edit custom html module in header where this button is and make below changes. You can use html view or source code view to see the code better.

From :

Code: Select all

<div><input type="email" /> <input type="submit" value="Get Started today!" /></div>


Change to

Code: Select all

<div><input type="email" /> <input id="bottombtn" type="submit" value="Get Started today!" /></div>


Save module.

Then open file /templates/gk_simplicity/js/gk.scripts.js
Add below code to end of the file.

Code: Select all

jQuery(document).ready(function() {
    jQuery('#bottombtn').click(function(){
        jQuery('html, body').animate({scrollTop:jQuery(document).height()}, 2000);
        return false;
    });
});


Now clicking on "Get Started Today!" button will scroll to bottom of the page. You can increase speed of scroll by changing "2000" in above code to lower value.
Lower value more faster
Higher value more slower

If you want to get rid off email box then edit custom html module again and simply delete below code

Code: Select all

<input type="email" />


See you around...

Thank you very much boss, that worked.

No problem at all, see you around...

On a similar note, I would like the button to scroll the page down to the mainbody module. How would I do that?

Thanks

@sayf00.

You can use following js code simply change button name and your mainbody div id which you want to scroll end to.
Change mybuttonclick to your button id.
Change myscrollto to mainbody div id where you want scrolling to.

Code: Select all

jQuery(document).ready(function() {
    jQuery('#mybuttonclick').click(function(){
        jQuery('html, body').animate({scrollTop:jQuery('#myscrollto').position().top}, 'slow');
        return false;
    });
});


See you around...

Worked perfectly! Thanks

No problem at all, see you around...