Back to top.How to make a punched site of the arrows to move slowly?

@Valoish
@vietkanpy

How to make a punched site of the arrows to move slowly? Currently he pushed as an arrow and it moves very quickly. I want the movement to be smooth.

Code:

<a href="#top" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="https://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></a>
 <a href="#page-footer" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="https://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></a>

Keep an eye on this topic c: https://help.forumotion.com/t149182-back-to-top-button-with-smooth-scroll
Kyo Panda already gave the scroll to top code. Now it seems someone else wants the scroll to bottom code as well.

@Valoish
I have code that runs the site slowly. The problem is that the code has no arrow keys to move down the site.

Code:

///hotrofm up top style xenforo///
$(document).ready(function(){
    $('body').append('<style type="text/css">#bttop {background-image: url(https://i97.servimg.com/u/f97/16/34/78/03/t10.png);background-size: 38px;bottom:10px;cursor:pointer;font-weight:bold;height:38px;line-height:38px;opacity:1;position:fixed;right:1%;text-align:center;text-decoration:none;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;transition:all 0.3s ease-in-out 0s;width:38px;z-index:1000;}</style><div id="bttop"><i class="fa fa-angle-double-up fa-2x"></i></div>');
    $(window).scroll(function() {
            if ($(this).scrollTop() != 0) {
                $('#bttop').fadeIn();
            } else {
                $('#bttop').fadeOut();
            }
        });
        $('#bttop').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
        });
});

SLGray

These arrows are now rapidly push the page by pressing on them. I've explained that this is a problem in my first post. So I want to make the code that I gave because he pushes the page smoothly.

@smurfavr, the script referenced by @Valoish does it "slowly" too, and I would be happy to customize it to your needs.

But if you want to use the arrows that are already in your forum, try adding to your Javascripts:

Code:

; (function ($) {
    var speed = 400;
    var $document = $(document);
    var $window = $(window);

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

    $(function () {
        var $body = $('html, body');
        var $down = $('a[href="#page-footer');
        var $up = $('a[href="#top"]');

        $down.on('click', function (event) {
            event.preventDefault();
            $body.stop().animate({ scrollTop: bottom() }, speed);
        });

        $up.on('click', function (event) {
            event.preventDefault();
            $body.stop().animate({ scrollTop: 0 }, speed);
        });
    });
} (jQuery));

<-- Best emote ever.

@Kyo Panda
Thanks for the code.

Can you do me a code that I give. Only needs to be added down arrow.

Code:

///hotrofm up top style xenforo///
$(document).ready(function(){
    $('body').append('<style type="text/css">#bttop {background-image: url(https://i97.servimg.com/u/f97/16/34/78/03/t10.png);background-size: 38px;bottom:10px;cursor:pointer;font-weight:bold;height:38px;line-height:38px;opacity:1;position:fixed;right:1%;text-align:center;text-decoration:none;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;transition:all 0.3s ease-in-out 0s;width:38px;z-index:1000;}</style><div id="bttop"><i class="fa fa-angle-double-up fa-2x"></i></div>');
    $(window).scroll(function() {
            if ($(this).scrollTop() != 0) {
                $('#bttop').fadeIn();
            } else {
                $('#bttop').fadeOut();
            }
        });
        $('#bttop').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
        });
});