UP Button at the bottom of the page

Another unsolved problem since two months.

It's absolutely standard for a site to have an Up-Button. But of course a Gavick theme has it not.

I was asking for this and like always the answer was lacking.

So finally tell me how to integrate an UP Button !

You can install following plugin to accomplish this as it would be easier for you to update template files without modding them.

http://extensions.joomla.org/extensions ... tion/16807

If you still want to edit files to add a back to top button let me know.

See you around...

Hi Norman,

I want to edit template files.

Did you agree that a "top button" is standard nowadays , especially for a news site ?
This News template is not well thought-out.

Regards
Peter

Yes I agree it should be a standard future. Please add following changes.

Find File: /templates/gk_news/layouts/default.php
Find following line at the end of the file

Code: Select all

<jdoc:include type="modules" name="debug" />


Add following before

Code: Select all

<span id="backtotop">Back to Top</span>


So it becomes

Code: Select all

   <span id="backtotop">Back to Top</span>
   <jdoc:include type="modules" name="debug" />


Find file: /templates/gk_news/js/gk.scripts.js
Add following to end of file.

Code: Select all

// Back to top function
var isVisible = false;
jQuery(document).ready(function() {
    jQuery('#backtotop').click(function(){
        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});
jQuery(window).scroll(function(){
     var shouldBeVisible = jQuery(window).scrollTop()>200;
     if (shouldBeVisible && !isVisible) {
          isVisible = true;
          jQuery('#backtotop').show();
     } else if (isVisible && !shouldBeVisible) {
          isVisible = false;
          jQuery('#backtotop').hide();
    }
});


Add following css code to css/override.css and please enable css override option from template advanced settings.

Code: Select all

#backtotop { cursor:pointer; position: fixed; bottom: 20px; right:20px; display:none; text-align:center;}
#backtotop {
    background-color: #F3F3F3;
    background-image: -moz-linear-gradient(center top , #F3F3F3 0%, #DDDDDD 50%, #D2D2D2 50%, #DFDFDF 100%);
    border-bottom: 1px solid #B4B4B4;
    border-radius: 5px 5px 5px 5px;
    border-right: 1px solid #DFDFDF;
    box-shadow: 0 1px 0 0 white inset, 0 1px 0 0 #D5D5D5, 0 -1px 2px 1px #EFEFEF;
    color: #666666;
    margin: 0;
    padding: 7px 0;
    text-shadow: 0 1px 1px #FFFFFF;
    width: 120px;
}


See you around...