Back to the top icon

[4lexsharpe]

Hello,

I have just looked at the option to print on the 'getperson.php' page and I notice it has a feature that I haven't seen on other pages but would be a nice option to have, 'the back to the top' icon appear once you scroll down the page. Looking at the source it looks like

<div class="scroll-to-top"><a href="#"><img src="img/backtotop.png" alt="" /></a></div>

is the code that make this feature work.

Is there a reason why this is not available on all pages, I'm using template #12

[Chris Lloyd]

fairly easy to add to pages. You'll need to bear in mid that the pages are generated on the fly by the call to the DB.

[Rob Severijns]

4lex,

As far as I can see the "back to top" icon only appears on the pages that require you to scroll down/up to much but I'm not entirely sure about that.

I use a different template (TNG 207 by Genealogy Web Templates)

Rob

[4lexsharpe]

Put that line of code in the template footer.php and so far it seem to work.

[Chris Lloyd]

5 hours ago, 4lexsharpe said:

Put that line of code in the template footer.php and so far it seem to work.

For most pages that would work well.

[Kare]

16 minutter siden, Chris Lloyd skrev:

For most pages that would work well.

And for what pages would it not work well??

[tngrlkrz]

I believe that, provided the css code noted above is in place in either topmenu.php  or footer.php, the point in a scrolled page to display an up arrow icon is controlled by a javascript routine in net.js (and main.js in a couple template folders). The value ">300"  , if adjusted, controls when the icon appears during scrolling a page.

    $('.scroll-to-top').hide();
        //Check to see if the window is top if not then display button
        $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('.scroll-to-top').fadeIn();
        } else {
            $('.scroll-to-top').fadeOut();
        }
This is why of the shorter scrolled pages do not display the up arrow, since it is set at a value considered reasonable, I suspect.

TNG has scroll to top icon implemented in some (15,19,20,21,224)  but not all templates that I looked at.  

[Marsha]

Hi All,

There are 5 pieces to the scroll to top:

1. CSS coding:

/* ======== BACK TO TOP FORMATTING ======== */
.scroll-to-top {display: none; position: fixed; bottom: 20px; right: 10px; z-index: 5; width: 30px; height: 30px; padding: 8px; text-align:center; color: #ffffff; text-decoration: none;
    background-color: #1f2159; box-shadow: inset 0 0 10px #202020, 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 5px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); border-radius: 50%;}
.scroll-to-top:hover {text-decoration: none; background-color: #2a2d7a; box-shadow: inset 0 0 15px #000000, 0 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}
.scroll-to-top a, .scroll-to-top a:hover {text-decoration: none;}

2. The code on the topmenu.php

<div class="scroll-to-top"><a href="#"><img src="<?php echo $cms['tngpath'] . $templatepath; ?>img/backtotop.png" alt="" /></a></div>

3. The JavaScript:

//SCROLL TO TOP
$(document).ready(function () {
  $('.scroll-to-top').hide();
  //Check to see if the window is top if not then display button
  $(window).scroll(function () {
  if ($(this).scrollTop() > 300) {
    $('.scroll-to-top').fadeIn();
  } else {
    $('.scroll-to-top').fadeOut();
  }
});
$('.scroll-to-top').click(function () {
  $('html, body').animate({ scrollTop: 0 }, 800);
  return false;
  });
});

4. The call to the Javascript:
This call goes in the footer. My javascript for the scroll is in my "main.js" in the javascripts folder. On my footer, it looks like this:

<script src="<?php echo $cms['tngpath'] . $templatepath; ?>javascripts/main.js" type="text/javascript"></script>

5. The arrow. You can make your own arrow or you can copy it from template19 or 21.

Marsha

Genealogy Web Templates
https://genealogywebtemplates.com

 

[tngrlkrz]

Thanks Marsha. 

I was only trying to point out where things happen within TNG and why some templates and pages do and some don't display the scroll-to-top, rather than displaying the full code you've presented .

 

 

[Chris Lloyd]

7 hours ago, Kare said:

And for what pages would it not work well??

I have some generated pages of lots of data, where it would help to have a back to the top midway or less down the page....

[RickM]

23 minutes ago, Chris Lloyd said:

I have some generated pages of lots of data, where it would help to have a back to the top midway or less down the page....

Play with the CSS probably

position: fixed; bottom: 20px; right: 10px;

or in the js file
if ($(this).scrollTop() > 300) {
or

$('html, body').animate({ scrollTop: 0 }, 800);

change the 300 and/or 800 to suit.

 

[4lexsharpe]

Thanks all for contributing to this topic. I'm not really that technically minded, but as I say I think I have a version that works just by placing that one line of code in the template footer. I suppose I think that as the code is there should it be a set up option for the administrator to choose whether to turn on / off?

[RickM]

3 minutes ago, 4lexsharpe said:

Thanks all for contributing to this topic. I'm not really that technically minded, but as I say I think I have a version that works just by placing that one line of code in the template footer. I suppose I think that as the code is there should it be a set up option for the administrator to choose whether to turn on / off?

I shall add this to  the list of mad attempts at a mod.. I like the idea, not sure how it would go in a WordPress/TNG setup though..

 

[Rob Roy]

Ctrl Home works quite well, no programming is required.

 

[tngrlkrz]

6 hours ago, Rob Roy said:

Ctrl Home works quite well, no programming is required.

That's a good point.  It works In Firefox and Chrome, but didn't for me  in Edge.   Plus, if you are mouse addicted, requires using the hand(s) for two keys, instead of single click.(a quibble). 

[bhemph]

     If you want to look at the code where it is generated for most templates, those not identified by Ron, you need to look at genlib lines 181-190.  It doesn't add the button if you have a CMS definition set up.  It will for mobile.  It will for printouts, odd result there.  It almost seems like the scroll-to-top should be outside of the elseif and in it's own if check to disable when printing.  So that is where to concentrate and see if the existing logic makes sense.

Brent

 

[tngrlkrz]

6 hours ago, bhemph said:

, you need to look at genlib lines 181-190. 

Yes, I had seen that code in genlib, but wasn't sure why it didn't yield the scroll-to-top for all the other templates other than those I mentioned, which have use template code.