Help Center - Add an arrow to scroll back to the top of the page
Zendesk level: Beginner
Knowledge: HTML, CSS, JQUERY
Time Required: 10 minutes
** 7/13/21 - @... has graciously written an updated version of this tip that will work with the new templating system. Check it out here: Help Center - Add an arrow to scroll back to the top of the page
** 05/13/16 - Updated to new version and fixed so it shows above widget if using one.
Most sites these days have a little link somewhere at the bottom of the page which takes the user back to the top of the page. This is a simple yet important piece of functionality, especially in this age of small screen browsing, where pages can become very long indeed.
Some of our article pages along with all the comments can become very lengthy. Solution – add an up arrow on your site that will take your users back to the top of the page.
Let’s Get Started!
Adding an up arrow to your articles can be done in under 5 minutes. This tutorial will require one line of HTML, some CSS, and JQuery.
- Download the svg file here.
- Upload the svg file into Zendesk. From your theme editor select “Assets” and upload the arrow that you saved.
- From your theme editor select “Header”. Add the following under the <header> tag. >
<a href="#" class="cd-top">Top</a>
- From your theme editor select “CSS”. Add the following at the very top or very bottom. Make sure you copy and paste your link from the Assets area in the background: selector. You may also change the color to mach your theme on the background selector.
.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%;
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;
}
}
5.
From your theme editor select “JS”. Add the following under the $(document).ready(function(){ .
//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 = $('.cd-top');//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
6.
Save and Publish and when scrolling down the page you should see the new up arrow pop into view. Click on it and it should scroll you back to the top.
-
It's not showing up for me :(
-
After a little tweaking I finally got this to work. Thank you so much!
-
@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 :-)
-
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.
-
@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.
-
I saw the vid after the fact, it is very helpful !
-
Awesome, Wes! Another great tip! I will clean it up for you, np.
-
@Jennifer - looks great! Thanks so much for cleaning it up.
-
I implemented it immediately!!
-
@Fernando Great to hear! I have a couple of other tips you may want to check out for the Help Center.
-
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!)
-
This is a great tip! Thank you so much for sharing!
-
@James Not a problem and I'm glad to hear that you found it useful.
-
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.
-
This is great! Clear simple steps and I was able to add it without issue. Thank you!
-
@Rachel - Glad to hear. Enjoy!
-
why not working in chrome and safari browser?pls tell any reason sir
-
@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.
-
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
-
sorry i mean editing tool*
-
@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.
-
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.
-
@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.
-
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.
-
@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.
-
@ 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.
-
@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.
-
@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!
-
@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.
-
@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.
Publicação fechada para comentários.
60 Comentários