jquery - Change Anchor ID When Media Query Active -

jquery - Change Anchor ID When Media Query Active -

i'm trying alter id of anchor tag when media query kicks in. code i'm trying failing with:

$(window).resize(function() { if ($('.container').css('width') == "100%"){ $("a[href='#why-us']").attr("href='#why-us-2'"); } });

i want replace href="#why-us" href="why-us-2"

thanks.

edit ** code have smooth scroll

$("a[href^='#']").on('click', function(e) { // prevent default anchor click behavior target = this.hash; e.preventdefault(); // animate $('html, body').animate({ scrolltop: $(this.hash).offset().top }, 500, function(){ // when done, add together hash url // (default click behaviour) window.location.hash = target; }); }); $(window).scroll(function() { if($(this).scrolltop() > 400) { $('.scroll-to-top').fadein(); } else { $('.scroll-to-top').fadeout(); } }); $('.scroll-to-top').click(function() { $('html, body').animate({scrolltop: 0},800); homecoming false; });

not sure if test works expect alter of attribute should be

$("a[href='#why-us']").attr("href","#why-us-2");

for handling media query changes through javascript see http://wicky.nillia.ms/enquire.js/

enquire.register("screen , (max-width:580px)", { match : function() { $("a[href='#why-us']").attr("href","#why-us-2"); }, // optional // if supplied, triggered when media query transitions // *from matched state unmatched state*. unmatch : function() { $("a[href='#why-us-2']").attr("href","#why-us"); } });

demo using above plugin: http://jsfiddle.net/nr2xhzja/

jquery html media-queries