Back to Top button in SideNav

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Back to Top button in SideNav

Postby MPlatt on Thu Sep 27, 2018 6:43 am

I'm trying to implement this Back to Top button - https://codepen.io/rdallaire/pen/apoyx
I've made a few changes (e.g. I'm not using font-awesome) and it works, except when the browser is wide and displays the Side Navigation panel.

I think this is caused by either one of the following issues:

When the Side Navigation panel displays, the scrollbar for the topic is no longer for the whole window, but only for the body.
What can I do in the javascript to detect scrolling in the body instead of the window?

or:

When the Side Navigation displays, the width properties of the body are changed and my button is hidden somewhere off screen.
What can I do in the css to show the button when this happens?

Button added below the body proxy in the masterpage:
Code: Select all
<MadCap:bodyProxy /><a href="#top" id="return-to-top"><p><img src="../Images/Standard/chevron-up.png" style="mc-thumbnail: none;width: 30px;height: auto;" /></p></a>


My altered css:
Code: Select all
#return-to-top
{
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: rgb(0, 0, 0);
   background: rgba(0, 0, 0, 0.7);
   width: 50px;
   height: 50px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: 35px;
   display: none;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index: 99;
}

#return-to-top p
{
   color: #fff;
   margin: 0;
   position: relative;
   text-align: center;
   font-size: 30px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

#return-to-top:hover
{
   background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover p
{
   color: #fff;
   top: -5px;
}


The javascript:
Code: Select all
// ===== Scroll to Top ====
$(window).scroll(function() {
    if ($(this).scrollTop() >= 150) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});

$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
MPlatt
Jr. Propeller Head
 
Posts: 8
Joined: Mon Mar 02, 2015 10:20 am

Re: Back to Top button in SideNav

Postby Dave Lee on Mon Oct 01, 2018 12:16 am

For side nav, you need to replace:
Code: Select all
$(window).scroll(function(){


With:
Code: Select all
$('div.body-container').scroll(function(){


See my post in this thread: viewtopic.php?f=13&t=28915#p131981
Dave Lee
Master Propellus Maximus
 
Posts: 5535
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Back to Top button in SideNav

Postby whunter on Mon Oct 08, 2018 8:52 am

EDIT: Duh, I had forgotten to reference the script in the brand new project. After fixing that, it works (fades in).
That's not the case in my help project though, so I guess I have done something to my project that makes this not work. Hmm.

______________________________________________

FWIW: I tried this in my help project (with Dave's adjustment) and it did not work for me -- meaning, icon does not fade in on scroll.

I then tried it in a brand new Flare Side Nav project, in case I had done something to my project that would make it not work. I could not get it to work there either.

If anyone has gotten it to work in side nav and has any insight into what may be going wrong, I would appreciate any help.
whunter
Sr. Propeller Head
 
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: Back to Top button in SideNav

Postby qtxasjo on Tue Apr 30, 2019 3:02 am

I have gotten the fade in button to work in side navigation by adding these:

JavaScript as separate file:
Code: Select all
$('div.body-container').scroll(function(){
      if ($(this).scrollTop() > 100) {
         $('.backToTop').fadeIn();
      } else {
         $('.backToTop').fadeOut();
      }
   });


In my CSS:
Code: Select all
a.backToTop
{
   position: fixed;
   bottom: 10px;
   right: 30px;
   display: none;
   z-index: 9999;
}


In my master pages, between my breadcrumbs and body proxies:
Code: Select all
<script type="text/javascript" src="../Scripts/backtotop.js"></script>
<a name="top"></a>
<a class="backToTop" href="#top"><img src="../Images/Icons/Arrows/chevron.png" alt="" title="" /></a>
qtxasjo
Propeller Head
 
Posts: 34
Joined: Tue Oct 16, 2007 5:06 am
Location: Europe


Return to Web-based Outputs

Who is online

Users browsing this forum: Google [Bot] and 2 guests

cron