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.
-
@Josh - thanks for the account and you can now delete it. Your site looks great but I want take too many points off for that :-).
One tiny mistake in your CSS code - arrow_up.png'
Change the end to a tick mark and that will fix your issue. You can can also use the relative URL as /hc/theme/etc..
-
@Josh - pushed enter to fast I was saying your site looked great but it wasn't responsive :-)
-
THANK YOU! What a great feature. Sorry for the sloppy mistake. I've been staring at this too long today. Have a great day.
-
@Josh - Glad it worked and have a great day.
-
@Wes I think I figured out why both Rocco and I had the same problem. We were copying the code directly from your above post and only replacing the link:
background: url('your URL will go here’) no-repeat;
It wasn't until he copied and replaced the second link you posted that his issue resolved.
background: url('/hc/theme_assets/249935/200002189/arrow_up.png') no-repeat;
Is it possible that your code up to have the tick replaced in the same way you had me change mine?
-
@Josh - I believe your are correct as it looks like the editor may have changed it when copying and pasting. I've edited the article and made sure they were both tick marks. Thanks for catching that.
-
@Wes: Forgive me for taking up too much time and for breaking what I'm sure is against forum protocol. Andrea recommended I shout out to you on another issue (https://support.zendesk.com/entries/53726947). I don't know how to contact you other than by posting here on this forum.
-
Josh, the moderators are all-seeing. :)
-
@Jennifer Ha ha ha. It feels that way.
-
Thank you!
-
@wlandan - You're welcome and enjoy!
-
Just study the possibilities of Zendesk customization. Awesome tip
-
@Wes - Is there some way that I can move the arrow to the left side of the screen instead of the right?
-
@Steffi - Sure just change the CSS right:10px; to left: 10px;
-
@Wes - Thank you!
-
@Steffi - Your welcome best of luck.
-
@Everyone - Updated the entire solution to a newer and better way. You can even adjust the colors of the svg icon.
-
-
I get it to work a little bit, but the arrow don't show. I am thinking it has to do with the .svg format?
Here you can (barely) see it showing up:
Using Chrome and win7
-
@Niclas - Hi - it sounds like there may be an issue with your CSS. In order for me to troubleshoot further, I would need to see what you have. Can you post the link to your Help Center?
-
We have pretty much a vanilla Copenhagen. Here is our sandbox
-
Hi @Niclas,
There is a syntax error in your CSS. Simply remove the space between url and () in your CSS so that your code will look like -
background: #F79420 url(YOUR_ASSET_URL) no-repeat center 50%;
Thanks
Trapta
-
It is working! Changed the colors and all.
One issue still, when the chat window is open, the arrow is hidden. I tried to move it up, but bottom: 340px; did not change anything. Any clues?
-
@Niclas, I cannot see the chat widget in your sandbox. Can you please enable it so that I can take a look at it and provide a fix for the issue?
Thanks
-
No, but you can get access to our production system. Please send an email to support.agv "a" kollmorgen dot com and I will give you access.
-
I have tried this numerous times with no success. Any help would be appreciated!
There is no $(document).ready(function(){ . in the JS file anymore. Not sure if this has been removed by Zendesk and I am unsure where to insert the JS snippet.
Thanks!
-
Hi GCCTech,
Any chance you could provide us with the code you're using that's not functioning properly? This post was created around 6 years ago so it's possible that there have been changes made to the Guide theme since then.
-
Hey Brett,
Thanks for the reply!
Here is the current default JS script for the Copenhagen theme. I cannot locate the "$(document).ready(function(){ ." that was previously located at the top of this script for the Copenhagen theme. Keep in mind I could be making a noob mistake and missing this somewhere.
JS Script:
document.addEventListener('DOMContentLoaded', function() {
function closest (element, selector) {
if (Element.prototype.closest) {
return element.closest(selector);
}
do {
if (Element.prototype.matches && element.matches(selector)
|| Element.prototype.msMatchesSelector && element.msMatchesSelector(selector)
|| Element.prototype.webkitMatchesSelector && element.webkitMatchesSelector(selector)) {
return element;
}
element = element.parentElement || element.parentNode;
} while (element !== null && element.nodeType === 1);
return null;
}// social share popups
Array.prototype.forEach.call(document.querySelectorAll('.share a'), function(anchor) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
window.open(this.href, '', 'height = 500, width = 500');
});
});// show form controls when the textarea receives focus or backbutton is used and value exists
var commentContainerTextarea = document.querySelector('.comment-container textarea'),
commentContainerFormControls = document.querySelector('.comment-form-controls, .comment-ccs');if (commentContainerTextarea) {
commentContainerTextarea.addEventListener('focus', function focusCommentContainerTextarea() {
commentContainerFormControls.style.display = 'block';
commentContainerTextarea.removeEventListener('focus', focusCommentContainerTextarea);
});if (commentContainerTextarea.value !== '') {
commentContainerFormControls.style.display = 'block';
}
}// Expand Request comment form when Add to conversation is clicked
var showRequestCommentContainerTrigger = document.querySelector('.request-container .comment-container .comment-show-container'),
requestCommentFields = document.querySelectorAll('.request-container .comment-container .comment-fields'),
requestCommentSubmit = document.querySelector('.request-container .comment-container .request-submit-comment');if (showRequestCommentContainerTrigger) {
showRequestCommentContainerTrigger.addEventListener('click', function() {
showRequestCommentContainerTrigger.style.display = 'none';
Array.prototype.forEach.call(requestCommentFields, function(e) { e.style.display = 'block'; });
requestCommentSubmit.style.display = 'inline-block';if (commentContainerTextarea) {
commentContainerTextarea.focus();
}
});
}// Mark as solved button
var requestMarkAsSolvedButton = document.querySelector('.request-container .mark-as-solved:not([data-disabled])'),
requestMarkAsSolvedCheckbox = document.querySelector('.request-container .comment-container input[type=checkbox]'),
requestCommentSubmitButton = document.querySelector('.request-container .comment-container input[type=submit]');if (requestMarkAsSolvedButton) {
requestMarkAsSolvedButton.addEventListener('click', function () {
requestMarkAsSolvedCheckbox.setAttribute('checked', true);
requestCommentSubmitButton.disabled = true;
this.setAttribute('data-disabled', true);
// Element.closest is not supported in IE11
closest(this, 'form').submit();
});
}// Change Mark as solved text according to whether comment is filled
var requestCommentTextarea = document.querySelector('.request-container .comment-container textarea');if (requestCommentTextarea) {
requestCommentTextarea.addEventListener('input', function() {
if (requestCommentTextarea.value === '') {
if (requestMarkAsSolvedButton) {
requestMarkAsSolvedButton.innerText = requestMarkAsSolvedButton.getAttribute('data-solve-translation');
}
requestCommentSubmitButton.disabled = true;
} else {
if (requestMarkAsSolvedButton) {
requestMarkAsSolvedButton.innerText = requestMarkAsSolvedButton.getAttribute('data-solve-and-submit-translation');
}
requestCommentSubmitButton.disabled = false;
}
});
}// Disable submit button if textarea is empty
if (requestCommentTextarea && requestCommentTextarea.value === '') {
requestCommentSubmitButton.disabled = true;
}// Submit requests filter form in the request list page
Array.prototype.forEach.call(document.querySelectorAll('#request-status-select, #request-organization-select'), function(el) {
el.addEventListener('change', function(e) {
e.stopPropagation();
closest(this, 'form').submit();
});
});function toggleNavigation(toggleElement) {
var menu = document.getElementById('user-nav');
var isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
toggleElement.setAttribute('aria-expanded', !isExpanded);
}var burgerMenu = document.querySelector('.header .icon-menu');
var userMenu = document.querySelector('#user-nav');burgerMenu.addEventListener('click', function(e) {
e.stopPropagation();
toggleNavigation(this);
});burgerMenu.addEventListener('keyup', function(e) {
if (e.keyCode === 13) { // Enter key
e.stopPropagation();
toggleNavigation(this);
}
});userMenu.addEventListener('keyup', function(e) {
if (e.keyCode === 27) { // Escape key
e.stopPropagation();
this.setAttribute('aria-expanded', false);
burgerMenu.setAttribute('aria-expanded', false);
}
});if (userMenu.children.length === 0) {
burgerMenu.style.display = 'none';
}// Submit organization form in the request page
var requestOrganisationSelect = document.querySelector('#request-organization select');if (requestOrganisationSelect) {
requestOrganisationSelect.addEventListener('change', function() {
closest(this, 'form').submit();
});
}// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});// If a section has more than 6 subsections, we collapse the list, and show a trigger to display them all
const seeAllTrigger = document.querySelector("#see-all-sections-trigger");
const subsectionsList = document.querySelector(".section-list");if (subsectionsList && subsectionsList.children.length > 6) {
seeAllTrigger.setAttribute("aria-hidden", false);seeAllTrigger.addEventListener("click", function(e) {
subsectionsList.classList.remove("section-list--collapsed");
seeAllTrigger.parentNode.removeChild(seeAllTrigger);
});
}
}); -
Hi there,
Thanks for the additional information!
I just added the code right after document.addEventListener and that seems to work on my end. Screenshot below:
Hope this helps!
-
Active Feature Request (please vote):
Feature Request: Add an arrow to scroll back to the top of the page
@...
I just posted a Feature Request for this at the link below. If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"
Also, you may consider adding it to your post to get the feature request more visible.
Cette publication n’accepte pas de commentaire.
60 Commentaires