Zendesk level: Beginner
Knowledge: HTML, CSS, JQUERY
Time Required: 10 minutes
** 7/13/21 -
** 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.
