[Support request] How to add the “Back to top”javascript as an element?

[Atef]

Hi,
I am creating a website for a friend who cater for visitors in extremely slow internet speeds.
I have the “back to top”option enabled in te theme customizer/footer.

I wanted to include this js as an element by pasting the code in the element, to save calling a js file only for the back to top.

i know that this is extremely trivial, but i nee dto do it.

I disabled the back to top option from the theme customizer, then pasted the js code in an element.
I have this element for the entire site, and the hook is to be added to the footer.
i have the execute php and execute shortcodes enabled.

However, the back to top buton o longer appears.

how to add the back to top button as an element not a separate file?

thanks

here is the code i pasted:

<script>
!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var t=document.querySelector(".generate-back-to-top");t&&(window.addEventListener("scroll",function(){var e=window.pageYOffset,i=t.getAttribute("data-start-scroll");e>i&&(t.style.opacity="1",t.style.visibility="visible"),e<i&&(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",function(e){e.preventDefault(),function(t,e){var i,n=window.pageYOffset,o=document.body.offsetTop,r=(o-n)/(e/16);i=function(){window.pageYOffset<=(o||0)&&clearInterval(a)};var a=setInterval(function(){window.scrollBy(0,r),i()},16)}(document.body,t.getAttribute("data-scroll-speed")||400)},!1))}}();
</script>

[David]

Hi there,

use a Hook element to add the following code to the after_footer hook:

<a title="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" style="opacity: 0; visibility: hidden;" data-scroll-speed="400" data-start-scroll="300">
	<span class="screen-reader-text">Scroll back to top</span>
	<span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
		<path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" fill-rule="nonzero"></path>
	</svg></span>
</a>

<script>
!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var t=document.querySelector(".generate-back-to-top");t&&(window.addEventListener("scroll",function(){var e=window.pageYOffset,i=t.getAttribute("data-start-scroll");e>i&&(t.style.opacity="1",t.style.visibility="visible"),e<i&&(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",function(e){e.preventDefault(),function(t,e){var i,n=window.pageYOffset,o=document.body.offsetTop,r=(o-n)/(e/16);i=function(){window.pageYOffset<=(o||0)&&clearInterval(a)};var a=setInterval(function(){window.scrollBy(0,r),i()},16)}(document.body,t.getAttribute("data-scroll-speed")||400)},!1))}}();
</script>

[Atef]

Thanks a lot David,
Worked prefectly.

Can you please help me doing the same for the “smooth-scroll.js”too, please?

Thanks a lot.

[David]

You can simply wrap the JS in <script></script> tags and hook that into the wp_footer hook.
If you’re trying to reduce requests then you may be better off just using Autoptimize to combine scripts.

[Author]

Posts