Estoy usando este código Volver al principio en mi página para obtener el progreso del desplazamiento y volver al principio. Mi pregunta es ¿cómo agregar fácilmente si a este código para ocultar este elemento en el móvil?
¡Gracias por ayudar!
(function($) { "use strict"; $(document).ready(function() { "use strict"; var progressPath = document.querySelector('.progress-wrap path'); var pathLength = progressPath.getTotalLength(); progressPath.style.transition = progressPath.style.WebkitTransition = 'none'; progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; progressPath.style.strokeDashoffset = pathLength; progressPath.getBoundingClientRect(); progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear'; var updateProgress = function() { var scroll = $(window).scrollTop(); var height = $(document).height() - $(window).height(); var progress = pathLength - (scroll * pathLength / height); progressPath.style.strokeDashoffset = progress; } updateProgress(); $(window).scroll(updateProgress); var offset = 50; var duration = 550; jQuery(window).on('scroll', function() { if (jQuery(this).scrollTop() > offset) { jQuery('.progress-wrap').addClass('active-progress'); } else { jQuery('.progress-wrap').removeClass('active-progress'); } }); jQuery('.progress-wrap').on('click', function(event) { event.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, duration); return false; }) }); })(jQuery);Tiene sus estilos de escritorio principales en el cuerpo del archivo CSS (1024px y superior) y luego para tamaños de pantalla específicos que estoy usando:
@media all and (min-width:960px) and (max-width: 1024px) { /* put your css styles in here */ } @media all and (min-width:801px) and (max-width: 959px) { /* put your css styles in here */ } @media all and (min-width:769px) and (max-width: 800px) { /* put your css styles in here */ } @media all and (min-width:569px) and (max-width: 768px) { /* put your css styles in here */ } @media all and (min-width:481px) and (max-width: 568px) { /* put your css styles in here */ } @media all and (min-width:321px) and (max-width: 480px) { /* put your css styles in here */ } @media all and (min-width:0px) and (max-width: 320px) { /* put your css styles in here */ }Si solo desea que los dispositivos de más de 568 px muestren el botón de desplazamiento, coloque el css para ocultar el resto en las consultas de medios inferiores.