Help Center - Add an arrow to scroll back to the top of the page

59 Comments

  • Andrea Saez

    It's not showing up for me :(

    0
  • Andrea Saez

    After a little tweaking I finally got this to work. Thank you so much! 

    0
  • Wes Drury

    @Andrea glad you got it working.  Is there anything I need to re-word .  Jennifer should be here soon to make it nice and neat.  I think ZenDesk should implement this on their website.  They need two one that says" Scroll to Last Comment" and then one for "Scroll to Top".  I know with some of the topics here I burn my scroll wheel up :-)

    0
  • Andrea Saez

    A little formatting on the document will certainly help ;) I completely missed the 'step 5'  and ended up pasting the JS script into CSS. Only noticed when I was on the CSS page that something didn't quite make sense.

    Also for the assets - might be good to add a screenshot so people know where that is.

    0
  • Wes Drury

    @Andrea Thanks for the feedback I've added an image of the theme editor that shows where each step goes.  Hopefully this well help a little.  Also not sure if you watched the video or not but I do each step in the video.

    0
  • Andrea Saez

    I saw the vid after the fact, it is very helpful !

    0
  • Jennifer Rowe

    Awesome, Wes! Another great tip! I will clean it up for you, np.

    0
  • Wes Drury

    @Jennifer - looks great!  Thanks so much for cleaning it up.

    0
  • Fernando Duarte

    I implemented it immediately!!

    0
  • Wes Drury

    @Fernando Great to hear! I have a couple of other tips you may want to check out for the Help Center.

    0
  • Jennifer Rowe

    We thought this might be a popular one! 

    You can find all of the tips by Wes on this page!

    https://support.zendesk.com/entries/25424716-Help-Center-community-tips-

    He has contributed FOUR so far. (Thanks!)

    0
  • James

    This is a great tip! Thank you so much for sharing!

    0
  • Wes Drury

    @James Not a problem and I'm glad to hear that you found it useful.

    0
  • Wes Drury

    Everyone - Just updated the CSS code as the uparrow was not highlighting as it was supposed to.  It should be .uparrow:hover instead it was .sup.hover.  You really couldn't tell before but now if you hover over the arrow will turn from gray to black.  Sorry for the oversight.

    0
  • Rachel Wolthuis

    This is great! Clear simple steps and I was able to add it without issue. Thank you!

    0
  • Wes Drury

    @Rachel - Glad to hear.  Enjoy!

    0
  • Padmanathan Snp

    why not working in chrome and safari browser?pls tell any reason sir

     

    0
  • Wes Drury

    @Padmanthan - This works fine on the latest version of all browsers.  I just tested on the latest version of Chrome and Safari.  It sounds like maybe you didn't do something correctly or you have some add-ons on your browsers that is not allowing the script to run.

    0
  • Saad Mehfooz

    Sir i'm not sure my editing told only allow me to edit HTML and CSS, if I follow the steps you mention would i be able to do this?

    Thanks

    0
  • Saad Mehfooz

    sorry i mean editing tool*

    0
  • Wes Drury

    @Saad - Great question - You will be able to add this code on the Regular Plan and up.  Unfortunately this will not work for Starter Plans as you are unable to customize the Help Center with that plan. 

    0
  • Saad Mehfooz

    thanks for the reply, actually i was googling for "scroll to top button" and this form showed up, i realized that later, I'm actually using different editing tool from different company, and they only allow to make changes in HTML and CSS, so i was looking forward to implement this on my website.

    0
  • Wes Drury

    @Sadd - If you are ever looking for Support Software make sure you give Zendesk a try as they do allow you to customize HTML, CSS, and JavaScript.

    0
  • Rocco Sarich

    Hey Wes, I am having a little trouble with this. I dont see the arrow at the bottom of the page however when I hover over where I imagine it would be, It does allow me to click it but the image doesn't display. Do you know what may be causing that?

    Please see attached file.

    0
  • Wes Drury

    @Rocco - Its hard to troubleshoot without seeing your site so I can inspect the elements.  If I had to take a guess make sure in your CSS you have something similar to the following as this appears to be CSS related:  

     background: url('//p2.zdassets.com/hc/theme_assets/249935/200002189/arrow_up.png') no-repeat;

    It may also have something to do with your customization.  If you are live and can post a link I'll be glad to take a look to see exactly what is going on.

    0
  • Rocco Sarich

    @ Wes - Thank you for the quick response. For some unknown reason copying and pasting as plain text was not working using the code contained within the article but it worked fine using the line of code from your last comment. You rock.

    0
  • Wes Drury

    @Rocco - I believe that is where you issue is.  Did you skip Step 2 where you loaded the image into your Assets folder.  Once its upload right click on it and get the link.  That is the link you need to put in your CSS code like my comment above.  My comment worked above as that's pointing to my Zendesk image which means when I replace my image your image is gone to.  Make sure the link is from your Zendesk Assets area.  Let me know if you need further help pointing to your own image.

    0
  • Josh Clayton

    @Wes, I am having the same issue Rocco is having.  I did all of your steps and also reviewed the video to be sure.  I can scroll back  to the top by clicking where the arrow should be, but it doesn't appear.  I've uploaded the arrow to my own asset.  Any advice would be appreciated!

    0
  • Wes Drury

    @Josh - Its hard to troubleshoot without seeing your site so if possible post a link to your site so I can see what's going on.  If you can't no big deal you can try the following:

    background: url('/hc/theme_assets/249935/200002189/arrow_up.png') no-repeat;

    Of course make sure this is pointing to your arrow that you uploaded.

    0
  • Josh Clayton

    @Wes - Thanks for the speed reply.  Our help center is help.imentor.org and I made you a test user account

    Log in: testuser@testuser.com

    Password: testuser

    I'll delete the account after you take a look.  Go to the bottom right corner and you will see you can find the link that take you to the top even thought the image doesn't appear.

    0

Please sign in to leave a comment.

Powered by Zendesk