jQuery Jump Scroll

时间：2015-11-17 05:13:13

标签： javascript jquery html css

当用户点击页面上的任何链接时，他们会跳转到3个特定面板中最近的面板，这些面板已指示在jQuery中跳转滚动。

如何编辑jQuery跳转滚动代码以仅影响导航栏中的链接（＆＃34;关于＆＃34;，＆＃34;工作＆＃34;，＆＃34;联系＆＃34;）而不是其他当用户浏览网站上的内容时页面上的链接？

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>

2 个答案:

答案 0 :(得分：0)

为这些元素添加唯一的id或class，并在on()函数中，将这些元素用作选择器：

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

答案 1 :(得分：0)

您可以通过执行以下操作，仅对.nav元素的子元素触发所需的点击事件：

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

或 

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