Back to Top link on Articles in Guide

Answered

8 Comments

  • Socorro Fernandez

    Hey Mike!

    It will be up to you where you insert this but you could add the following html to your article_page.hbs so it creates a link that once clicked, scrolls back to the top of the page and would also be part of all articles:

    <a href="#top">Back to top</a>

    You can edit the bold part as needed so it reads how you want. You should be able to add this before the related articles code if that is part of your article_page.hbs

    Please let me know if you run into any issues here!

     

    0
  • Mike Hatfield

    Hey Socorro,

    Thank you for this! I am not a code guy and thankfully there was a Guru nearby that added this. 

    Thanks again,

    Mike

    0
  • Victoria Campagna

    Is there a way to add an arrow to go to the top of page?  I tried the instructions on the below article, but could not get it to work.

    https://support.zendesk.com/hc/en-us/community/posts/203458756-Help-Center-Add-an-arrow-to-scroll-back-to-the-top-of-the-page

    Thanks,
    Victoria

    0
  • Trapta
    Community Moderator

    Hi @Victoria Campagna,

    Can you elaborate on what issues you are facing? It would be helpful for us to help you if you can share the screenshot or the code you are using.

    Thanks

    0
  • Victoria Campagna

    Hi Trapta,

    Thank you for the response.  Here is everything I did:

    1. Added image to "assets" folder here:
    2. Added the following line to header.hbs:
    3. Added this code to style.css
      /***** start of "top of page" feature *****/
      .cd-top {
      display: inline-block;
      height: 40px;
      width: 40px;
      position: fixed;
      bottom: 40px;
      right: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      /* image replacement properties */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      /*background: #F79420 url('$assets-cd-top-arrow-svg') no-repeat center 50%;*/
      background: #F79420 url('$assets-cd-top-arrow-svg') no-repeat center 50%;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: opacity .3s 0s, visibility 0s .3s;
      -moz-transition: opacity .3s 0s, visibility 0s .3s;
      transition: opacity .3s 0s, visibility 0s .3s;
      }
      .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
      -webkit-transition: opacity .3s 0s, visibility 0s 0s;
      -moz-transition: opacity .3s 0s, visibility 0s 0s;
      transition: opacity .3s 0s, visibility 0s 0s;
      }
      .cd-top.cd-is-visible {
      /* the button becomes visible */
      visibility: visible;
      opacity: 1;
      }
      .cd-top.cd-fade-out {
      /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
      opacity: .5;
      }
      .no-touch .cd-top:hover {
      background-color: #F79420;
      opacity: 1;
      }
      @media only screen and (min-width: 768px) {
      .cd-top {
      right: 55px;
      bottom: 60px;
      }
      }
      @media only screen and (min-width: 1024px) {
      .cd-top {
      height: 30px;
      width: 30px;
      right: 55px;
      bottom: 60px;
      }
      }
      /***** end of "top of page" feature *****/
    4. Added the following code to script.js:

    Thanks in advance,
    Victoria

    0
  • Trapta
    Community Moderator

    Hi @Victoria Campagna,

    Try replacing the script.js code with the below code and let me know how it goes for you.

    // Up Arrow
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,

    // browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,

    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,

    //grab the "back to top" link
    $back_to_top = document.querySelector('.cd-top');

    // hide or show the "back to top" link
    window.addEventListener('scroll', function(e) {
    (window.scrollY > offset) ? $back_to_top.classList.add("cd-is-visible") : $back_to_top.classList.remove('cd-is-visible', 'cd-fade-out');
    });

    //smooth scroll to top
    $back_to_top.addEventListener('click', function(e) {
    e.preventDefault();
    scroll({
    top: 0,
    behavior: "smooth"
    });
    });

    Here's a working example for you.

    Thanks

    0
  • Victoria Campagna

    Hi Trapta,

    That worked!  It looks great.  Thank you, thank you, thank you!!

    -Victoria 

    1
  • Trapta
    Community Moderator

    @Victoria Campagna

    Glad to hear that.

    Happy Zendesking :)

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk