在媒体查询JavaScript中使用滚动顶部

Question

I am tuning my scrolltop for mobiles and tablet. But i noticed, when i have this code for desktop:

$(document).ready(function(){
    "use strict";
    $('#menu ul li #page3').on('click', function(){
        $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.99}, 850);
    }); 
}); 

When i use:

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) ");
if (mql.matches){ // ALL PHONES

$(document).ready(function(){
    "use strict";
    $('#menu ul li #page3').on('click', function(){
        $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.99}, 850);
    }); 
}); 

}

When i use another value for offset, it doesn't go directly to #page3, it goes first to the old #page 3 settings from desktop, STOPS and then go slowly to the #page3 set in the media query

Why isn't this just replacing the code like with css media query's?

Another problem is that the media query in javascript does work but when i rotate my screen from landscape to portrait or the other way around it still uses the landscape code in portrait mode and the other way. Does someone know how to fix this?

The last thing is that nothing changes when i target my ipad:

var mql = window.matchMedia("only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation : landscape) ");
if (mql.matches){ //TABLET LANDSCAPE

}

Help and explanation is appreciated

EDIT:

I am using this:

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) ");
if (mql.matches){ // ALL PHONES PORTRAIT

But want to use also this in it

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : landscape) ");
    if (mql.matches){ // ALL PHONES LANDSCAPE

How can i combine these 2 in one code for IF, and let the desktop have ELSE.

That with the desktop worked and it also worked with 1 IF, but doesn't work with both.

Can you also combine the window resize code inside my code for me to understand completely how it works because i know 0,0 about this. I just know how to use multiple media queries in javascript underneath eachother, that's it.

I really appreciate your time and effort.

Answer 1

1. It's natural, you have two functions to call when something was happened (click) so both of them must be call one by one, it wouldn't override the first one - think, how many problems it could generate? Let's say you have some slider with control buttons and then you want to change some section content when click on some of this buttons - so you add some action to click event on control buttons - if this code could override the old one, then you wouldn't be able to show next slide. Not good at all :/ In your case you can prevent double call by just place code for desktop inside 'else'.

    if (mql.matches) { //code for mobiles } else { //code for desktop } 

2. Problem with landscape is because your javascript code keeps the 'mql' value calculated after page load, which is not updated after screen rotating. To fix that you can add some event handler for window resize (rotate phone changes window size) and update 'mql' value then:

    $(window).resize(function() { mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) "); }); 

   Tip: to improve your code you can move this device match code to some separate function.

3. I don't have much experience with iPads, but maybe they have bigger resolution than in your query?

EDIT:

4. Your code should look similar to this:

    $(document).ready(function() { function mediaSize() { var isTabletLandscape = window.matchMedia('(min-width: 768px) and (max-width: 1366px) and (orientation: landscape)'); var isPhoneLandscape = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: landscape)'); var isPhonePortrait = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: portrait)'); if (isTabletLandscape.matches) { //code for tablet landscape } else if (isPhoneLandscape.matches) { //code for phone landscape } else if (isPhonePortrait.matches) { //code for phone portrait } else { //code for desktop $('#menu ul li #page3').on('click', function(){ $('html,body').animate({scrollTop: $(".footer").offset().top * 0.99}, 850); }); } } mediaSize(); window.addEventListener('resize', mediaSize, false); }); 

Answer 2

First off this is a horrid selector and really makes no sense to have an id, then another id like this. $('#menu ul li #page3') I assume you want to do something based on the click of some LI (or link inside that, but for simplicity we will use li). Note that you did not provide HTML however I suspect you have duplicate id's ie id="page3" which is invalid html, don't do that.

Next we need to use the media query to set a boolean value group for each. Now that we know those, we can use a conditional (if) to do something. Here we will set a size value and use it.

Now that we have ironed out that, we can write a function to return a value based on those. We will call that function within the single click event handler. I am not sure of your desire here as it is not super clear in your question so I will just put it together and you can later alter this to your specific needs.

 function sniffTheMedia() { let isIpad = window.matchMedia("only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation : landscape) "); let isLandscape = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : landscape) "); let isPortrait = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) "); // I picked totally random numbers, adjust to suit let size = isIpad ? 800 : isLandscape ? 400 : isPortrait ? 300 : 500; return size; } // add event handler $(function() { "use strict"; $('#menu').on('click', 'li', function() { let sniffed = sniffTheMedia(); //console.log(sniffed); let target = "#" + $(this).data("target"); $('html, body').animate({ scrollTop: $(target).offset().top * 0.99 }, sniffed); }); }); 

 .somediv { height: 6em; border: solid cyan 1px; } .footer { height: 5em; } .men-item { border: solid lime 1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="menu"> <ul class="menu-group"> <li class="menu-item" data-target="page1">Howdy 1</li> <li class="menu-item" data-target="page2">Friend 2</li> <li class="menu-item" data-target="page3">Friend 3</li> <li class="menu-item" data-target="myfooter">footer</li> </ul> </div> <div id="page1" class="somediv">I am a div content 1</div> <div id="page2" class="somediv">I am a div content 2</div> <div id="page3" class="somediv">I am a div content Page 3</div> <div id="myfooter" class="footer"><span>Footer Content</span> I am in the footer </div>