Help Center Tip: Add an arrow to scroll back to the top of the page
An original version of this tip was contributed byModeratorWes. As Zendesk updated the theming template, the code for the tip needed an upgrade.
The below code will work with the new theming template of the Zendesk theme. Let's get started.
Zendesk level: Beginner
Knowledge: HTML, CSS, JQUERY
Time Required: 10 minutes
A working example can be foundhere.
Follow the below steps to add and make it work:
1. Download the SVG filehere.
2. Upload the svg file into Zendesk. From your theme editor select “assets” and upload the arrow that you saved.
3. From your theme editor select “header.hbs”. Add the following under the
Top
4. From your theme editor select “style.css”. Add the following at the very top or very bottom. Make sure you copy and paste your link from theassetsin thebackground: selector. You may also change the colour to match 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);
/ *图像再保险placement 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 “script.js”. Add the following under thedocument.addEventListener('DOMContentLoaded', 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 = 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"
});
});
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.
Cheers.
-
Ifra Saqlain- Thanks for the updated code!
-
Hey there,
I followed the steps but am not able to get the arrow to show. Can you clarify what you mean by "Upload the svg file into Zendesk. " - does this mean into Add> Asset?
As well, "Make sure you copy and paste your link from theassetsin thebackground: selector. " - I'm not seeing a link.
Thanks!
Pleasesign into leave a comment.
2 Comments