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

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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






Luffy
Manager
Manager

Male Posts : 4260
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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?

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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.


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.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);
        });
});

vietkanpy
Forumember

Male Posts : 39
Reputation : 14
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?

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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

vietkanpy
Forumember

Male Posts : 39
Reputation : 14
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>

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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.

Valoish
Forumember

Female Posts : 116
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.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 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>

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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.

Valoish
Forumember

Female Posts : 116
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.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 12th 2016, 9:27 pm

thanks Valoish .

smurfavr
Active Poster

Male Posts : 1425
Reputation : 13
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






Luffy
Manager
Manager

Male Posts : 4260
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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