The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Help: Scroll to Bottom of Page code

View previous topic View next topic Go down

Help: Scroll to Bottom of Page code

Post by leonidas on June 25th 2013, 5:30 pm

i'm using this code for my back to top button:

code in my site description -->
Code:
<div id=backtotop><img src=http://i78.servimg.com/u/f78/14/05/87/26/back-t10.png /></div>

CSS -->
Code:
#backtotop {
    bottom: 50px;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 14px;
    opacity: 0.4;
    position: fixed;
    text-align: center;
    z-index: 999;
    right: 30px;
    border-radius : 8px;
    -webkit-border-radius : 8px;
    -moz-border-radius : 8px;
    }
    #backtotop:hover {
    opacity  : 0.8;
    }


and javascript -->


Code:
$(function() {
      $(window).scroll(function() {
          if($(this).scrollTop() != 0) {
            $('#backtotop').fadeIn();
          } else {
            $('#backtotop').fadeOut();
          }
      });
 
      $('#backtotop').click(function() {
          $('body,html').animate({scrollTop:0},800);
      });
    });


now, my members who are using their celfones to access the forum are requesting for the opposite - a scroll to the bottom of the page button...

is it possible to create a code for that similar to the above-posted codes? thanks in advance to those who'll help... Smile

leonidas
Forumember

Posts : 28
Reputation : 6
Language : English

Back to top Go down

Re: Help: Scroll to Bottom of Page code

Post by Ultron's Vision on June 25th 2013, 5:35 pm

You don't even need JavaScript for that... lol.

Code:
<a href="#bottom">
scrolls to the bottom of the page.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Help: Scroll to Bottom of Page code

Post by leonidas on June 25th 2013, 5:40 pm

@Ultron's Vision wrote:You don't even need JavaScript for that... lol.

Code:
<a href="#bottom">
scrolls to the bottom of the page.

that's it? where's that supposed to go? anyway, im looking for something that functions just like the code on top, only the opposite...

leonidas
Forumember

Posts : 28
Reputation : 6
Language : English

Back to top Go down

Re: Help: Scroll to Bottom of Page code

Post by Ultron's Vision on June 25th 2013, 9:19 pm

Anywhere, just as normal button.

Wherever you can insert HTML, that will work (except if you have something with an id of "bottom" in your page).

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Help: Scroll to Bottom of Page code

Post by levy on June 25th 2013, 10:32 pm

Code:
<a href="#bottom" id="hulk">Click me to go to bottom</a>

Code:
$("#hulk").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");

});​

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Re: Help: Scroll to Bottom of Page code

Post by Ultron's Vision on June 25th 2013, 10:42 pm

Well, okay, you want it to scroll smoothly.

That is HTML's solution for it and it will just instantly go down to the bottom.

You can use something like that, though.

Code:
<a href="#bottom">Click to go to the bottom of the page (works even without JavaScript!)</a>

And then in a new jQuery script.

Code:
jQuery('a[href="#bottom"]').click(function(e){
e.preventDefault();
e.stopPropagation();
jQuery('html,body').animate({scrollTop:jQuery(document).height()},"slow"});
});

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum