jquery glatt scrollen Problem

Question

Ich habe eine jquery Frage, die ich brauche Hilfe mit und kann nicht scheinen, Ergebnisse zu finden, die mein Problem lösen. Ich habe eine 1-Seite-Website, die die jquery unten verwendet, um reibungslos zu verankern, um Links zu verankern. Das einzige Problem ist, dass, wenn es auf dem Handy ist, ich die Rolle anpassen muss, um ein Top-170px Defizit zu haben. Wie kann ich mobile Suchanfragen nur mit der gleichen Funktion wie unten behandeln?

$(function() { 
$('a[href*="#"]:not([href="#"])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 700); 
    return false; 
    } 
} 
}); 
}); 

Answer 1

I 2 Optionen für Sie zur Verfügung stellen können:

Sie können eine JS-Bibliothek laden, um zu prüfen, auf welchem ​​Browser/Gerät Sie sich befinden. https://github.com/rafaelp/css_browser_selector. Dies lädt eine Klasse auf dem HTML-Element, das Sie in Ihrer Funktion wie folgt überprüfen:

$(function() { 
     $('a[href*="#"]:not([href="#"])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        if($('html').hasClass('mobile')) { 
         $('html, body').animate({ 
          scrollTop: target.offset().top - 170 
         }, 700); 
        } else { 
         $('html, body').animate({ 
          scrollTop: target.offset().top 
         }, 700); 
        } 
        return false; 
       } 
      } 
     }); 
    }); 

Oder Sie können die Fenstergröße überprüfen, um zu überprüfen, ob es niedriger als Tablette:

$(function() { 
     $('a[href*="#"]:not([href="#"])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        if($(window).width() < 768) { 
         $('html, body').animate({ 
          scrollTop: target.offset().top - 170 
         }, 700); 
        } else { 
         $('html, body').animate({ 
          scrollTop: target.offset().top 
         }, 700); 
        } 
        return false; 
       } 
      } 
     }); 
    }); 

Answer 2

Dies funktioniert für mich in Ordnung, übergeben Sie die ID richtig, es funktioniert

ele.on('click',function(){ 

      $('html, body').animate({scrollTop: $("#"+id).offset().top}, 750); 

     }); 

Answer 3

Sie richtig Bildschirmbreite überprüfen und, wenn es weniger als bestimmte Breite, etwa 320, dann kann man in Betracht ziehen, die zusätzliche Scroll-Offset erforderlich:

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       var winWidth = $(window).width(); 
       if(winWidth > 320) 
       { 
        $('html, body').animate({ 
         scrollTop: target.offset().top 
        }, 700); 
       } 
       else 
       { 
        $('html, body').animate({ 
         scrollTop: target.offset().top - 170 
        }, 700); 
       } 
      return false; 
      } 
     } 
    });//click 
});//ready