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.

How do I add an arrow (button) that by pressing and they move to the top of the site?

View previous topic View next topic Go down

Solved How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 11th 2016, 8:21 pm

How do I add an arrow (button) that by pressing and they move to the top of the site?


Last edited by smurfavr on October 12th 2016, 9:35 pm; edited 1 time in total
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by Luffy on October 11th 2016, 8:26 pm

This is what i am using @smurfavr:
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:14px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>
Try adding that in your modules or in your overall_header and it will show up! Smile





avatar
Luffy
Manager
Manager

Male Posts : 4922
Reputation : 506
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 11th 2016, 8:29 pm


Where exactly it added in overall_header or js? does it matter?
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by SLGray on October 11th 2016, 8:47 pm

Add it at the end.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 41099
Reputation : 2803
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by vietkanpy on October 12th 2016, 4:42 am

ACP > MODULES >> HTML & JAVASCRIPT > Javascript codes management

Code:
///hotrofm up top style xenforo///
$(document).ready(function(){
    $('body').append('<style type="text/css">#bttop {background:#3a5795 none repeat scroll 0 0;bottom:10px;color:#fff;cursor:pointer;font-weight:bold;height:38px;line-height:38px;opacity:1;position:fixed;right:5%;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;}#bttop:hover {border:1px solid #ffa789;background:#ff6734;}.fa-angle-double-up:before {content:"\f102";}</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
vietkanpy
Forumember

Male Posts : 65
Reputation : 28
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 12th 2016, 11:07 am

How can I change the arrow with another?
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by vietkanpy on October 12th 2016, 4:38 pm

@smurfavr wrote:How can I change the arrow with another?

Code:
///hotrofm up top style xenforo///
$(document).ready(function(){
    $('body').append('<style type="text/css">#bttop {background-image: url(http://clarityincode.com/img/icon_arrow_up.png);background-size: 38px;bottom:10px;cursor:pointer;font-weight:bold;height:38px;line-height:38px;opacity:1;position:fixed;right:5%;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);
        });
});

change http://clarityincode.com/img/icon_arrow_up.png Smile
avatar
vietkanpy
Forumember

Male Posts : 65
Reputation : 28
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 12th 2016, 8:08 pm

thanks vietkanpy.

This code how can I change button?

Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:14px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by Valoish on October 12th 2016, 8:39 pm

<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:14px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Change the bold red part with:
Code:
<img src="Image Link">
Replace Image Link with the link of the image you want.

You might have to tweak the css I the code a bit so that it fits your button image.
avatar
Valoish
Forumember

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

http://www.canvastutorials.org/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 12th 2016, 8:46 pm

So it should be?
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:14px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top"><img src=" http://clarityincode.com/img/icon_arrow_up.png"></a>
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by Valoish on October 12th 2016, 8:59 pm

Yup c: I cleaned up the code a little bit (removed a few things that were for text styling that you no longer need):
Code:
<a href="#top" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top"><img src=" http://clarityincode.com/img/icon_arrow_up.png"></a>
I also added a width and height style. They're currently both set as 000px since I'm on a phone and can't get the size of your image. Just change the zeros into the correct numbers and you should be good to go.
avatar
Valoish
Forumember

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

http://www.canvastutorials.org/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by smurfavr on October 12th 2016, 9:27 pm

thanks Valoish .
avatar
smurfavr
Active Poster

Male Posts : 1610
Reputation : 14
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: How do I add an arrow (button) that by pressing and they move to the top of the site?

Post by Luffy on October 12th 2016, 10:07 pm

Thanks everyone!!

Problem solved & topic archived.
Please read our forum rules: ESF General Rules





avatar
Luffy
Manager
Manager

Male Posts : 4922
Reputation : 506
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

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