For a limited-time, upgrade to +Blizzard for $30 USD and receive the following:

— a free copy of Oblivion Light.
— a free copy of WebFlake Trackers Bundle.
— a free WF Halloween Member Badges (PSD).

You can visit this thread below for more details regarding the original promotion.
CLICK HERE

Contact @Davlin to make a purchase or for questions / comments.

Jump to content
lastbidule

For IPS v 4.3.6 Back to top in the body of the site

Recommended Posts

Tutorial
Place a button in image or awesome font to get back to the top of the page.

This is to use on an IPS v 4.3.6 version, you can also try to adapt it for the higher versions the code to be placed using only direct links for the scripts and the integrated css in the "globalTemplate" page of you theme.

So you need to know how to edit the html files that make up your template.
Be careful to respect strictly the explanations given in the tutorial or you may be unable to implement this useful function or worse, destroy your template if you mistakenly erase lines of code belonging to it

Installation procedure:

1° Open your template "globalTemplate" of your theme
2° In this one look for the tag </ head>
Add just above this one (important) the code below.

Spoiler

<!-- back to top css -->
<style type="text/css">
#btn_up
{
position: fixed;
bottom: -15px;
right: 10px;
cursor: pointer;
display:none;
}
</style>
<!-- back to top css end -->

You must get this:

Spoiler

<style type="text/css">
#btn_up
{
position: fixed;
bottom: -15px;
right: 10px;
cursor: pointer;
display:none;
}
</style>
<!-- back to top css end -->
</head>

3° Then look in the same template (just below </ head>) this:
 

Spoiler

 

<body class = 'ipsApp ipsApp_front {{if isset (\ IPS \ Request :: i () -> co etc ......................... .......>

and under the end of the closing tag add this:

<!-- back to top script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){
  $('#btn_up').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });

  $(window).scroll(function(){
     if($(window).scrollTop()<150){
        $('#btn_up').fadeOut();
     }else{
        $('#btn_up').fadeIn();
     }
  });
});
</script>
<!-- back to top script end -->

 

You have to get something like this:

Spoiler

 

</head>
    <body class='ipsApp ipsApp_front {{if isset( \IPS\Request::i()->cookie['hasJS'] )}}ipsJS_has{{else}}ipsJS_none{{endif}} ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' {{if output.globalControllers}}data-controller='{expression="implode( ',', output.globalControllers )"}'{{endif}} {{if isset( output.inlineMessage )}}data-message="{expression="output.inlineMessage"}"{{endif}} data-pageApp='{$location['app']}' data-pageLocation='front' data-pageModule='{$location['module']}' data-pageController='{$location['controller']}'>

<!-- back to top script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){
  $('#btn_up').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });

  $(window).scroll(function(){
     if($(window).scrollTop()<150){
        $('#btn_up').fadeOut();
     }else{
        $('#btn_up').fadeIn();
     }
  });
});
</script>
<!-- back to top script end -->

 

4° look for the line at the bottom of the template:

Spoiler

</ Body>
</ Html>

Add just above </ body> this:

Spoiler

 

<!-- back to top icon or image -->
<div id="btn_up">
<p style="font-size:26px;color: #868686;border-top-width: 1px;border-top-style: solid;border-right-style: solid;border-right-width: 1px;border-bottom-width: 1px;border-bottom-style: solid;border-left-width: 1px;border-left-style: solid;border-radius: 20px;padding-left: 4px;padding-right: 4px;padding-top: 4px;padding-bottom: 2px;"><i class="fa fa-plus"></i></p>
</div>

<!--
<div id="btn_up">
<img alt = "Back to top of the page" title = "Back to the top of the page" src = "http: // address_of_your_image" style = "width: 80px; height: auto;" />
</div>
-->
<!-- back to top icon or image end -->

 

You can change the size of this image to suit your display.

If you prefer to use an awesome font, put the image code instead:

and of course customize the placement of your font in the tag you have an example below.

Spoiler

<p style = "font-size: 26px; color: # 868686; border-top-width: 1px; border-top-style: solid; border-right-style: solid; border-right-width: 1px; bottom-width: 1px; border-bottom-style: solid; border-left-width: 1px; border-left-style: solid; border-radius: 20px; padding-left: 4px; padding-right: 4px; padding- top: 4px; padding-bottom: 2px; " >

the parameters to adjust in the javascrit:

Spoiler

$ ('html, body'). animate ({scrollTop: 0}, 'slow');  // choose the speed to go up 'slow' (600 ms) by 'normal' (400 ms) or 'fast' (200 ms).
 
 if ($ (window) .scrollTop () <150)   // Here the button appears from 150 pixels scroll down.

the parameters to be set in the css for the case:

Spoiler

#btn_up
{
position: fixed;
bottom: 15px;
right: 25px;
cursor: point;
display: none;
}


In this example, the button will be placed in a fixed position at 25px from the right edge and 15px from the bottom of the screen. The "cursor: pointor" allows to display a hand during the passage of the mouse.
Free to modify the position of the button at your convenience

Me in my example I used an awesome and set bottom: -15px; and right: 10px; to be placed as on the screenshoot. I also added rounded borders to make it more beautiful.

Fontawesome.thumb.png.1368f9399d1034a947189070f042b8d1.png

 

image.thumb.png.e3eda92ee40a260d108926f1d14cccc0.png

Original source from which is drawn the script which I inspired myself:
http://jean-louis.pierre.pagesperso-orange.fr/une-image-pour-revenir-au-top-de-la-page.html

Edited by lastbidule
  • Upvote 1

Share this post


Link to post
Share on other sites

A nice little tutorial i'm sure it will come in handy for some.

Edited by Tricky

Share this post


Link to post
Share on other sites
14 hours ago, Tricky said:

A nice little tutorial i'm sure it will come in handy for some.

Thanks Tricky for the compliment. 👍

Indeed I am certain that it will serve for other because originally I searched for a lot of time a scrool to top that would work with my versioin of ips, and as nothing worked I looked for on the web a solution that would allow me to benefit from such an important function when you have a site with a long slider to go back to the top of a page.

The solution found being tested and functional at home so I decided to share it with all those who, as I was, are looking for a famous scroll to top and find nothing satisfactory until present.

Simple to implement and useful for all that this little tutorial 🤤

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×