Back to top button with smooth scroll

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 : 4125
Reputation : 675
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 : 4125
Reputation : 675
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 : 581
Reputation : 7
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 : 581
Reputation : 7
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
Administrator
Administrator

Male Posts : 12494
Reputation : 1308
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top


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