Help Center - Add an arrow to scroll back to the top of the page | Community
Skip to main content

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

  • October 4, 2013
  • 60 replies
  • 0 views

Show first post
This topic has been closed for replies.

60 replies

  • November 10, 2017

We have pretty much a vanilla Copenhagen. Here is our sandbox

 


Trapta
  • November 10, 2017

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


  • November 10, 2017

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?


Trapta
  • November 10, 2017

@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


  • November 10, 2017

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.


  • May 7, 2019

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!

 


Brett13
  • Community Manager
  • May 8, 2019

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.


  • May 9, 2019

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);
});
}
});


Brett13
  • Community Manager
  • May 10, 2019

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

@Wes Drury

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.

https://support.zendesk.com/hc/en-us/community/posts/360046753894-Feature-Request-Add-an-arrow-to-scroll-back-to-the-top-of-the-page