to the top is working on normal screens but not on mobile?

  • Resolved johannes999

    (@johannes999)


    1 year, 1 month ago

    I have this html code in footer.php:

    <div id="footer">
			
		
		
		<div class="footer-sub">
	 
	 <div class="footer-section1"> 
		   Direct-Bellen<br>Mobiel:06xxxxxx					
			
		</div>
			
		<div class="footer-section2"> 	
			Openingstijden <br>Ma t/m vrij 09:00 uur - 20:00 uur<br> Zaterdag & Zondag 10:00 uur - 18:00 uur

			
					</div>		
			
		       		
		<div class="footer-section3"> 
			adres	<br>Op Afspraak   </div>
			
			<a id="back-to-top" class="expand-form" href="#">
  <span class="material-symbols-outlined">expand_less</span>
</a>
			</div>  </div>

    and this js code in footer.php:

    <script>
jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $('#back-to-top').fadeIn();
    } else {
      $('#back-to-top').fadeOut();
    }
  });

  $('#back-to-top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 'slow');
  });
});
	
	

</script>

    and this css: 

    	
		.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}



span.material-symbols-outlined {
  font-size: 20px; /* Adjust the font size to make the icon larger */
  font-weight: bolder;
  color: white;
  height: 20px; /* Adjust the height and width accordingly */
  width: 20px;
  background-color:red;
  text-align: center;
}

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 2%;
  z-index: 9999;
  opacity: 0.5;
  transition: opacity 0.3s;
}

    I have also google icon link between <head> </head>

    this code is working perfectly on my other website but in this website it is working only on big screens from 1081 to up .

    it is not working on mobile untill 1080 pixels. at all.

    I tried to test in extra css section of wordpress but it didn’t work either..

    normally footer has 3 sections which on mobile I am using only 1 section and the other 2 sections set to display none . I don’t know if this has to do with disabling 2 sections of the footer class . I do the same on my other website and there to the top is working perfectly.

    to be sure I disabled lite speed plug in but the problem is the same .

    as you see this to top function is not working on mobile can some one tell me or give me an idea what it can be the fault ? why it is working normally on normal screen and is not working on mobile screens?

    I know there is js code which is outside of this forum but I am sure the js code is correct.

    maybe some one can see what I don’t see .

    thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Your page currently looks quite “broken”. You obviously use Litespeed for optimisation. Deactivate it and then test whether the link works. If it does, it’s because of Litespeed.

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    I see some problem maybe it is from cdn or litespeed .

    I am now bussy to transfer this website to onother provider of me .

    if I see here there is no problem at all then I can find the problem on the default site easely.

    I let you know when I am finished transfering website , maybe tomorrow.

    thank you

    I

    Thread Starter johannes999

    (@johannes999)

    I found the fault after few days suddenly.

    in html smooth scroll I had set height:100% when I removed it it worked also on mobile but this time I used font awsome.

    the page is in test domein: https://webdesignmaster.eu/

    not on my default site.

    thank you for your help and response.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘to the top is working on normal screens but not on mobile?’ is closed to new replies.