JQuery Перейти Scroll

Question

Когда пользователь нажимает любую ссылку на странице они прыгнули к ближайшей панели 3 конкретных панелей, которые были указаны для перехода прокрутки в JQuery.

Как отредактировать код прокрутки jQuery, чтобы влиять на ссылки в панели навигации («О», «Работа», «Контакт») и никаких других ссылок на странице, поскольку пользователь просматривает контент на сайте?

CSS:

/****Landscape****/ 
/*global styles*/ 
body { 
width: 100%; 
margin: 0; 
list-style: none; 
text-decoration: none; 
font-size:1.05em; 
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
} 
a{ 
    appearance: none; 
    font-size:1.05em; 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
    background:transparent; 
    color: #000000; 
    border:none; 
    letter-spacing:0.15em; 
    text-transform:uppercase; 
    transition: color 0.5s ease; 
    list-style: none; 
text-decoration: none; 
    } 

a:focus, a:hover { 
color: #e6e8eb; 

    cursor:pointer; 
    transition: color 0.5s ease; 
    width: inherit; 
    right: 0; 
    left: 0; 
} 

a:active { color: #484747; } 
/*----/----global styles*/ 


/*contact panel*/ 
.letmeknow:hover { 
color: #464c4c; 
cursor:pointer; 
    transition: color 0.5s ease; 
} 

.letmeknow { 
appearance: none; 
    width:80%; 
    height:50px; 
    font-size:1.05em; 
    background:transparent; 
    color: #e6e8eb; 
    border:none; 
    letter-spacing:0.15em; 
text-transform:uppercase; 
    transition: color 0.5s ease; 
    outline:none; 
    border:none; 
    } 

/*Contact submit Form*/ 
#container { 
    width: 840px; 
    margin: 25px auto; 
} 

.whysign { 
    float: left; 
    background-color: white; 
    width: 480px; 
    height: 347px; 
    border-radius: 0 5px 5px 0; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

.signup { 
    float: left; 
    width: 300px; 
    padding: 30px 20px; 
    background-color: white; 
    text-align: center; 
    border-radius: 5px 0 0 5px; 
} 

[type=text] { 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
    border: 0; 
    border-bottom: 1px solid rgba(0,0,0,.2); 
    height: 45px; 
    line-height: 45px; 
    margin-bottom: 10px; 
    font-size: 1em; 
    color: rgba(0,0,0,.4); 
} 

input[type="submit"] { 
    appearance: none; 
    width:80%; 
    height:50px; 
    font-size:1.05em; 
    background:transparent; 
    color: #e6e8eb; 
    border:none; 
    letter-spacing:0.15em; 
    text-transform:uppercase; 
    transition: color 0.5s ease; 
    outline:none; 
    border:none; 
} 

input[type="submit"]:hover { 
    color: #464c4c; 
    cursor:pointer; 
    transition: color 0.5s ease; 
} 

[type='text']:focus { 
    outline: none; 
    border-color: #53CACE; 
} 
span:hover { 
     color: #53CACE; 
} 
/*----/----contact form*/ 

/*Nav Bar*/ 
.header { 
background: #ffffff; 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 99999; 
} 
.nav { 
background: #ffffff; 
    float: right; 
    text-align: right; 


} 
.nav > li { 
     display: inline-block; 
     padding: 2px; 
     padding-right: 30px; 
} 
/*----/----Nav Bar*/ 

/*Panels*/ 
.panel { 
width: 100%; 
background: #000000; 
color: #ffffff; 
height: 40em; 
padding: 3em; 
box-sizing: border-box; 
} 

.links{ 
color: #ffffff; 
} 

.panel .inner { 
    padding-top: 10%; 
    color: #df 
} 
.panel.panel-blank { 
background: #ffffff; 
color: #000000; 
} 
/*----/----Panels*/ 

/*logo*/ 
.logo { 
float:left; 
display: inline-block; 
width: 15px; 
height: 15px; 
padding: 18px; 
cursor: pointer; 
} 
/*----/----logo*/ 


/****Portrait****/ 
    @media (max-width: 850px) { 
/*global styles*/ 
.body { 
width: 100%; 
margin: 0; 
list-style: none; 
text-decoration: none; 
} 
.header { 
background: #ffffff; 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
} 
.nav { 
    position: fixed; 
    width: 100%; 
    text-align: center; 
    display: none; 
    background-color: #ffffff; 
    left: 0; 
    top: 39px; 
} 
.nav > li { 
     postition: absolute; 
     display: block; 
     left: 0; 
     width: 100%; 
     padding-top: 0.6em; 
     padding-bottom: 1em; 
} 
.nav > li:hover { 
     postition: absolute; 
     display: block; 
     left: 0; 
     width: 100%; 
     padding-top: 0.6em; 
     padding-bottom: 1em; 

     cursor:pointer; 

} 

/*----/----global styles*/ 

/*logo*/ 
.logo { 
float:left; 
display: block; 
width: 15px; 
height: 15px; 
padding: 18px; 
cursor: pointer; 
} 
/*----/----logo*/ 

/*navigation icon*/ 
#toggle-menu { 
float:right; 
display: block; 
width: 15px; 
height: 15px; 
padding: 20px; 
} 

#toggle-menu div { 
width: 15px; 
height: 15px; 
position: relative; 
} 
#toggle-menu span { 
display: block; 
width: 15px; 
height: 3px; 
background: black; 
position: absolute; 
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
-webkit-transform-origin: center; 
-moz-transform-origin: center; 
transform-origin: center; 

} 
#toggle-menu span.top { 
top: 0px; 
} 
#toggle-menu span.middle { 
top: 6px; 
} 
#toggle-menu span.bottom { 
top: 12px; 
} 
/*----/----navigation icon*/ 

/*navigation icon animation*/ 
#toggle-menu.menu-is-active span { 
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
} 
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active  span.middle { 
top: 6px; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
transform: rotate(45deg); 
} 
#toggle-menu.menu-is-active span.middle { 
opacity: 0; 
} 
#toggle-menu.menu-is-active span.bottom { 
top: 6px; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
transform: rotate(-45deg); 
} 
/*----/----navigation icon animation*/ 
} 
/*----/----Portrait*/ 

.footer { 
width: 100%; 
background: #000000; 
color: #ffffff; 
height: 10em; 
padding: 5em; 
box-sizing: border-box; 
} 

JQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script> 
<script> 

jQuery(document).ready(function() { 
$(window).resize(function(){ 
    if ($(window).width() >=850) { 
     $(".nav").show(); 
    } 
    else{ $(".nav").hide();} 
}); 
$('#toggle-menu').click(function() { 

    $(this).toggleClass('menu-is-active') 

}); 

/* click outside of nav to trigger navigation icon animation*/ 
$(document).click(function() { 
    $("#toggle-menu").removeClass(); 
}); 
$("nav").click(function (e) { 
    e.stopPropagation(); 
    return false; 
}); 

/*----/----navigation icon animation*/ 

/*toggle menu*/ 
jQuery("#toggle-menu").click(function() { 
    jQuery(".nav").slideToggle(); 
}); 
/* click outside of nav to close toggle*/ 
$(document).click(function() { 

    if ($(window).width() < 850) { 
     $(".nav").hide(); 
    } else { 
     $(".nav").show(); 
    } 
}); 
$("#toggle-menu").click(function (e) { 
    e.stopPropagation(); 
    return false; 
}); 
/*----/----toggle menu*/ 


/*Jump Scroll*/ 
$(function() { 
var $window = $(window), $document = $(document), 
    transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support 
    scrollTime = 1; // scroll time in seconds 


$(document).on("click", "a[href*=#]:not([href=#])", function(e) { 
    var target, avail, scroll, deltaScroll; 

    if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) { 
     target = $(this.hash); 
     target = target.length ? target : $("[id=" + this.hash.slice(1) + "]"); 

     if (target.length) { 
      avail = $document.height() - $window.height(); 

      if (avail > 0) { 
       scroll = target.offset().top; 

       if (scroll > avail) { 
        scroll = avail; 
       } 
      } else { 
       scroll = 0; 
      } 

      deltaScroll = $window.scrollTop() - scroll; 

      // if we don't have to scroll because we're already at the right scrolling level, 
      if (!deltaScroll) { 
       return; // do nothing 
      } 

      e.preventDefault(); 



      if (transitionSupported) { 
       $("html").css({ 
        "margin-top": deltaScroll + "px", 
        "transition": scrollTime + "s ease-in-out" 
       }).data("transitioning", scroll); 
      } else { 


       $("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it) 
       .animate({ 
        scrollTop: scroll + "px" 
       }, scrollTime * 1000); 

       return; 
      } 
     } 
    } 
}); 



if (transitionSupported) { 
    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) { 
     var $this = $(this), 
      scroll = $this.data("transitioning"); 

     if (e.target === e.currentTarget && scroll) { 
      $this.removeAttr("style").removeData("transitioning"); 

      $("html, body").scrollTop(scroll); 
     } 
    }); 
    } 
}); 
/*----/----Jump Scroll*/ 

/*contact let me know toggle*/ 
jQuery(".letmeknow").click(function() { 
    jQuery(".container").slideToggle(); 
}); 
/*----/-----contact let me know toggle*/ 


}); 
</script> 

HTML:

<div class="header"> 
<div class="navbar"> 

<a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a> 

<a id="toggle-menu"> 
<div> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 
</div> 
</a> 

<ul class="nav"> 
     <li><a href="" style="display: inline-block; width:100%;">Home</a></li> 
     <li><a href="#panel9" style="display: inline-block; width:100%;">About</a></li> 
     <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li> 
     <li><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li> 
    </ul> 
</div> 
</div> 

<div class="maincontent"> 
    <div class="panel multiplepanels" id="panel1"> 
     <div class="inner"> 1 </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel2"> 
     <div class="inner"> <p>Work Title 1</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel3"> 
     <div class="inner"> <p>Work Title 2</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel4"> 
     <div class="inner"> <p>Work Title 3</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel5"> 
     <div class="inner"> <p>Work Title 4</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel6"> 
     <div class="inner"> <p>Work Title 5</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel7"> 
     <div class="inner"> <p>Work Title 6</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel8"> 
     <div class="inner"> <P>Like what I do?</P> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel9"> 
     <div class="inner"> <p>Social</p> </div> 
    </div> 

    </div> 


    <footer> 
    <div class="" id="panel10"> 
     <div class="inner"> © 2015 thiswebsite.com</div> 
    </div> 
    </footer> 

Answer 1

Дайте те элементы уникальный id или class и в функции on(), использовать их в качестве селекторов :

$(document).on("click", "#uniqueId .orClass", function(e) { 
    //code 
}); 

Answer 2

Вы можете вызвать желаемое событие щелчка только на детей .nav элемента, выполнив следующие действия:

$(".nav").on("click", "a[href*=#]:not([href=#])", function(e) { 
    ... 
}); 

или

$(document).on("click", ".nav a[href*=#]:not([href=#])", function(e) { 
    ... 
});