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.

Back to top button with smooth scroll

View previous topic View next topic Go down

Solved Back to top button with smooth scroll

Post by Valoish on December 2nd 2016, 5:40 pm

I've looked around on the forum but I can't seem to find a tutorial for a smooth scrolling back to top button :c
I'd like the button to be in the bottom right corner of the forum (on all pages).

Here's a link to my forum: http://canvasforums.com/

Thank you c:


Last edited by Valoish on December 8th 2016, 6:59 pm; edited 1 time in total
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Valoish on December 4th 2016, 2:51 am

Bumpu~
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by skouliki on December 4th 2016, 3:00 am

avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 2990
Reputation : 465
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Valoish on December 4th 2016, 3:49 am

Hi @Skouliki,

I saw that tut by Ange but unfortunately it doesn't have a smooth scroll when clicking the button ; A;
This is what I had in mind
I found a few tutorials online but I'm not too sure if they'd work on Forumotion x_x
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Kyo Panda on December 4th 2016, 1:39 pm

Hello, o/

I've made a script with this functionality a short while ago. So, here is the shameless plug:

  • On Administrative Panel Modules HTML & Javascript Javascript codes management Create a new Javascript, and insert the following code with Placement marked on In all pages:

    Code:
    /*global jQuery: true*/

    /**
     * An easy access button that allows a quick return to the top of the page.
     *
     * @author Kyo Panda (ajuda.forumeiros.com)
     * @license MIT
     */

    ; (function ($) {
        'use strict';

        $(function () {
            var link;

            link = $('<a>', {
                href: 'javascript:void(0)',
                id: 'fa-scrolltop',
                text: '˄'
            }).appendTo('body');

            $(window).on('scroll', function () {
                link.toggleClass('fa-scrolltop-visible', $(this).scrollTop() !== 0);
            });

            link.on('click', function () {
                $('html, body').stop().animate({ scrollTop: 0 }, 'fast');
            });
        });
    })(jQuery);

  • Then, on Administrative Panel Display Pictures & Colors Colors CSS stylesheet, paste the following at the end of the text area:

    Code:
    /* BEGIN Scroll Top Button */
     
    #fa-scrolltop {
      position: fixed;
      right: 30px;
      bottom: 30px;
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      text-decoration: none !important;
      background-color: #1394d4;
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      visibility: hidden;
      opacity: 0;
      border: 1px rgba(0, 0, 0, 0.25) solid;
      border-radius: 3px;
      transition: 250ms ease all;
    }
     
    #fa-scrolltop:hover,
    #fa-scrolltop:focus,
    #fa-scrolltop:active {
      background-color: #0e70a0;
    }
     
    #fa-scrolltop.fa-scrolltop-visible {
      visibility: visible;
      opacity: 1;
    }
     
    /* END Scroll Top Button */


You can check the result here and see if it fits your needs: http://laboratory.forumeiros.com

^-^v
avatar
Kyo Panda
Forumember

Male Posts : 33
Reputation : 19
Language : Portuguese, English
Location : Brazil

http://pt.rpgmaker.io

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Valoish on December 5th 2016, 12:44 am

Kyo Panda wrote:Hello, o/

I've made a script with this functionality a short while ago. So, here is the shameless plug:

  • On Administrative Panel Modules HTML & Javascript Javascript codes management Create a new Javascript, and insert the following code with Placement marked on In all pages:

    Code:
    /*global jQuery: true*/

    /**
     * An easy access button that allows a quick return to the top of the page.
     *
     * @author Kyo Panda (ajuda.forumeiros.com)
     * @license MIT
     */

    ; (function ($) {
        'use strict';

        $(function () {
            var link;

            link = $('<a>', {
                href: 'javascript:void(0)',
                id: 'fa-scrolltop',
                text: '˄'
            }).appendTo('body');

            $(window).on('scroll', function () {
                link.toggleClass('fa-scrolltop-visible', $(this).scrollTop() !== 0);
            });

            link.on('click', function () {
                $('html, body').stop().animate({ scrollTop: 0 }, 'fast');
            });
        });
    })(jQuery);

  • Then, on Administrative Panel Display Pictures & Colors Colors CSS stylesheet, paste the following at the end of the text area:

    Code:
    /* BEGIN Scroll Top Button */
     
    #fa-scrolltop {
      position: fixed;
      right: 30px;
      bottom: 30px;
      display: block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      text-decoration: none !important;
      background-color: #1394d4;
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      visibility: hidden;
      opacity: 0;
      border: 1px rgba(0, 0, 0, 0.25) solid;
      border-radius: 3px;
      transition: 250ms ease all;
    }
     
    #fa-scrolltop:hover,
    #fa-scrolltop:focus,
    #fa-scrolltop:active {
      background-color: #0e70a0;
    }
     
    #fa-scrolltop.fa-scrolltop-visible {
      visibility: visible;
      opacity: 1;
    }
     
    /* END Scroll Top Button */


You can check the result here and see if it fits your needs: http://laboratory.forumeiros.com

^-^v

This is perfect! Thank you so much @Kyo Panda~!
Can this topic be kept open a little bit longer just in case I have any more questions or difficulties?

Edit; Is there a way to use a Font Awesome up arrow instead of a ^?
I tried changing it in the JS but it didn't work x_x
I have FA installed on my forum already.
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Kyo Panda on December 6th 2016, 12:07 am

Sure thing.

Replace the Javascript with the one below:

Code:
/*global jQuery: true*/
 
/**
 * An easy access button that allows a quick return to the top of the page.
 *
 * @author Kyo Panda (ajuda.forumeiros.com)
 * @license MIT
 */
 
; (function ($) {
    'use strict';
 
    $(function () {
        var link;
 
        link = $('<a>', {
            href: 'javascript:void(0)',
            id: 'fa-scrolltop',
            html: $('<span>', {
                class: 'fa fa-angle-up'
            }).prop('outerHTML')
        }).appendTo('body');
 
        $(window).on('scroll', function () {
            link.toggleClass('fa-scrolltop-visible', $(this).scrollTop() !== 0);
        });
 
        link.on('click', function () {
            $('html, body').stop().animate({ scrollTop: 0 }, 'fast');
        });
    });
})(jQuery);

And add to the CSS:

Code:
#fa-scrolltop .fa {
  line-height: inherit;
}

If you feel that the arrow isn't properly positioned (like I did), instead of using the CSS above, try fine tuning this one below:

Code:
#fa-scrolltop .fa {
  line-height: 36px;
}

I 'felt' that 36px looked 'right'.

^-^
avatar
Kyo Panda
Forumember

Male Posts : 33
Reputation : 19
Language : Portuguese, English
Location : Brazil

http://pt.rpgmaker.io

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by skouliki on December 6th 2016, 9:31 am

thank you @Kyo Panda for the code i use it in my forum also (with a border radius)
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 2990
Reputation : 465
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by udarsha45 on December 6th 2016, 11:10 am

@Kyo Panda Is there a way to insert a a scroll down button (back to down) as well? So there is both scroll up and scroll down buttons.
avatar
udarsha45
Forumember

Male Posts : 526
Reputation : 3
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Kyo Panda on December 6th 2016, 11:46 pm

@skouliki, happy to help. ^-^

---

@udarsha45, I would alter the script to cover both buttons, but I felt it was wrong. So I've created a separated script to show the "scroll bottom" button:

Add to your Javascripts:

Code:
/*global jQuery: true*/
 
/**
 * An easy access button that allows a quick return to the bottom of the page.
 *
 * @author Kyo Panda (ajuda.forumeiros.com)
 * @license MIT
 */
 
; (function ($) {
    'use strict';
 
    $(function () {
        var link, bottom;
 
        link = $('<a>', {
            href: 'javascript:void(0)',
            id: 'fa-scrollbottom',
            class: 'fa-scrollbottom-visible',
            html: '▼'
        }).appendTo('body');

        bottom = function () {
            return $(document).height() - $(window).height();
        };

        $(window).on('scroll', function () {
            link.toggleClass('fa-scrollbottom-visible', $(this).scrollTop() !== bottom());
        });
 
        link.on('click', function () {
            $('html, body').stop().animate({ scrollTop: bottom() }, 'fast');
        });
    });
})(jQuery);

And to your CSS:

Code:
/* BEGIN Scroll Bottom Button */
 
#fa-scrollbottom {
  position: fixed;
  right: 85px;
  bottom: 30px;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  text-decoration: none !important;
  background-color: #1394d4;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  visibility: hidden;
  opacity: 0;
  border: 1px rgba(0, 0, 0, 0.25) solid;
  border-radius: 3px;
  transition: 250ms ease all;
}
 
#fa-scrollbottom:hover,
#fa-scrollbottom:focus,
#fa-scrollbottom:active {
  background-color: #0e70a0;
}
 
#fa-scrollbottom.fa-scrollbottom-visible {
  visibility: visible;
  opacity: 1;
}
 
/* END Scroll Top Button */

I've already tweaked up the scroll bottom button so that it doesn't overlaps the scroll top button.
avatar
Kyo Panda
Forumember

Male Posts : 33
Reputation : 19
Language : Portuguese, English
Location : Brazil

http://pt.rpgmaker.io

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by udarsha45 on December 7th 2016, 10:36 am

Thanks alot @Kyo Panda Very Happy
avatar
udarsha45
Forumember

Male Posts : 526
Reputation : 3
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by Valoish on December 8th 2016, 6:59 pm

Sorry for the late reply, finals week is killing me x_x
Thank you @Kyo Panda! The code works perfectly. c:
This is solved, but I don't know if other people are still waiting for a reply ><
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top button with smooth scroll

Post by APE on December 8th 2016, 7:44 pm

if others need more help they can link this thread in there own post
Problem solved & topic archived.
Please read our forum rules:  ESF General Rules



avatar
APE
Manager
Manager

Male Posts : 10805
Reputation : 1008
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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