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.How to make a punched site of the arrows to move slowly?

View previous topic View next topic Go down

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

Post by smurfavr on December 6th 2016, 1:36 pm

@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>
avatar
smurfavr
Active Poster

Male Posts : 1605
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by Valoish on December 6th 2016, 3:50 pm

Keep an eye on this topic c: http://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.
avatar
Valoish
Forumember

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

http://www.canvastutorials.org/

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by smurfavr on December 6th 2016, 10:46 pm

@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);
        });
});
avatar
smurfavr
Active Poster

Male Posts : 1605
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by SLGray on December 7th 2016, 10:10 am



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40897
Reputation : 2776
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by smurfavr on December 7th 2016, 11:45 am

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.
avatar
smurfavr
Active Poster

Male Posts : 1605
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by Kyo Panda on December 9th 2016, 7:09 pm

@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));

Bouncy <-- Best emote ever.
avatar
Kyo Panda
Forumember

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

http://pt.rpgmaker.io

Back to top Go down

In progress Re: Back to top.How to make a punched site of the arrows to move slowly?

Post by smurfavr on December 9th 2016, 9:59 pm

@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);
        });
});
avatar
smurfavr
Active Poster

Male Posts : 1605
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.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