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

Home Forums Support How to add the “Back to top”javascript as an element?

  • This topic has 3 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1338433
    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>
    
    
    #1338679
    David
    Staff
    Customer Support

    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>
    #1339018
    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.

    #1339863
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.