Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Joanna_K

Problem after adding two different codes into one block

Question

Hi all,

I just added a second code into the block, it's working fine  but the first code which is 'back to to" button causes a little problem now.
After clicking on the button this is added to the link /#top
How can I fix it, please?
https://www.martafaye.com

Edited by Joanna_K

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

I added the first one and the second one is acting up now 

 

<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');

var ml_account = ml('accounts', '1797144', 'z1s6m5f5u9', 'load');
</script>
<!-- End MailerLite Universal -->
<style>
.back-to-top {
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  .back-to-top, .back-to-top img {
    /* Change the width and height to be as big or as small as you want your back-to-top button to be. 100px or 50px are both solid choices. */
    width: 50px;
    height: 50px;
  }
  
  .back-to-top.show {
       opacity: 1;
  }
</style>


<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;"><img src="https://static1.squarespace.com/static/5bc1cc8cca525b01aebd0f32/t/5d2f22ace13e6e0001368dba/1563370156792/white-open-sans-font-black-border.png
" ></a>


<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');

var ml_account = ml('accounts', '1797144', 'z1s6m5f5u9', 'load');
</script>

 

 

 

 

Share this post


Link to post
  • 0

@Joanna_K

In the code you inserted

a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">

If you remove #top, the code wont work.

When you click Back to Top, it moves up / down the position with the ID #top. So you cannot delete this.

You can also try changing #top to #
Or find another code to create a back to top button. (I remember on Google, there has some tutorials on this for Squarespace, try ;))


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...