Malihu自定义滚动条 - 滚动到id插件无法在页面中工作

时间：2016-10-12 16:00:16

标签： javascript jquery html mcustomscrollbar

我正在使用Malihu的自定义滚动条插件，并希望将“Scroll to id”插件与其一起添加。我的代码段中提供的代码可以解决我想要的问题（虽然有时按钮似乎不起作用）。

主要问题是当我将此代码放入我的网站时，有些东西阻止了它的工作。当您向下滚动页面时，右侧部分会突出显示正确的点，但如果您点击它们不会导航到右侧部分，则它们根本不会执行任何操作。

Page：https://www.kentunion.co.uk/test2/ 

$( document ).ready(function() {
  (function($){
    $(window).on("load",function(){
      $("a[href*='#']").mPageScroll2id();
    });
  })(jQuery);
});
#background {
  background-image: url("/pageassets/test2/background.jpg");
  position: fixed;
  background-color: #E07853;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;

}
.content-spacing {
  padding: 0px !important;
}
#background div {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background-color: #ffffff;
  -khtml-opacity: .1;
  -moz-opacity: .1;
  opacity: .1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
a{
  color: inherit;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}

hr{
  display: block; 
  height: 0; 
  border: 0; 
  border-top: 1px solid rgba(0,0,0,0.2); 
  border-bottom: 1px solid rgba(255,255,255,0.2); 
  margin: 1em 0; 
  padding:0;
}

h1, h2, h3, p{
  margin-bottom: 1em;
}

h1, h2{
  font-family: 'Lobster Two',georgia,serif;
  line-height: 1em;
  font-weight: 700;
}

h2{
  font-size: 4em;
}

#navigation-menu {
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9;
}
header, #content, footer{
  position: relative;
}

header, footer{
  padding: 1em 3em;
  text-shadow: none;
}

header h1{
  color: #e6842c;
  font-size: 1.4em;
  font-style: italic;
}

nav ul, nav ol, nav li{
  list-style: none; 
  margin: 0; 
  padding: 0;
}
#navigation-menu ul{
  overflow: hidden;
  background: #564a44;
  background: rgba(0,0,0,0.5);
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

#navigation-menu li{
  margin: 3px;
}

#navigation-menu a{
  display: block;
  padding: 0.2em 0.6em;
  border-radius: 50%;
  height: 30px;
  border: 1px solid black;
}

#navigation-menu a:hover, #navigation-menu a.mPS2id-highlight{
  background: #e6842c;
  color: #fff;
}

.content {
  z-index: 500;
  display: block;
  position: relative;
}

#contents section{
  text-align: center;
  min-height: 900px;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b5f59', endColorstr='#362f2d',GradientType=1 ); 
  color: #d9d6d5;
}

#contents section:nth-child(3n+2){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efe7dc', endColorstr='#c6b6a4',GradientType=1 ); 
  color: #25201e;
}

#contents section:nth-child(3n+3){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6fbfc', endColorstr='#94cbce',GradientType=1 ); 
  color: #25201e;
}

.contents{
  padding: 1em 3em;
  z-index: 500;
  display: block;
  position: relative;
}

.contents hr + a, .content hr + a + a{
  margin-right: 2em;
}

.mPS2id-target .content h2:first-child:after{
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-left: 1em;
  font-size: 0.25em;
  line-height: 1.4em;
  font-style: italic;
  opacity: 0.7;
  width: 180px;
  font-family: arial,sans-serif;
  font-weight: normal;
}

.ie8 .mPS2id-target .content h2:first-child:after{
  font-size: 0.95em;
}

header, .content, footer{
  padding-right: 150px;
}

.horizontal-layout{
  width: 700%;
}

.horizontal-layout header h1{
  display: none;
}

.horizontal-layout #navigation-menu{
  right: auto;
  left: 3em;
  top: 4em;
}

.horizontal-layout #contents{
  overflow: hidden;
}

.horizontal-layout #contents section{
  width: 14.285%;
  float: left;
  min-height: 480px;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.6); 
  box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.6);
}

.horizontal-layout #content section:nth-child(3n+2),.horizontal-layout #content section:nth-child(3n+3){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.2),inset 1px 0 0 rgba(255,255,255,0.5); 
  box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.2),inset 1px 0 0 rgba(255,255,255,0.5);
}

.horizontal-layout .content h2{
  position: relative;
  padding-bottom: 50px;
}

.horizontal-layout .content h2 + p{
  margin-top: -50px;
}

.horizontal-layout .mPS2id-target .content h2:first-child:after{
  display: block;
  position: absolute;
  width: 100%;
  height: 50px;
  margin-left: 0;
}

.horizontal-layout header > *, .horizontal-layout footer > *{
  width: 10%;
}

.horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer{
  padding-left: 150px;
  padding-right: 3em;
}

.auto-layout{
  width: 6200px;
  height: 6200px;
}

.auto-layout header h1{
  margin-left: 150px;
}

.auto-layout #navigation-menu{
  right: auto;
  left: 2em;
}

.auto-layout #contents{
  height: 100%;
}

.auto-layout #contents section{
  position: absolute;
  min-height: 600px;
  width: 600px;
  top: 0;
  left: 0;
  margin-left: 3em;
  -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2); 
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.auto-layout #contents section#section-2{
  top: 0;
  left: 1800px;
}

.auto-layout #contents section#section-3{
  top: 1200px;
  left: 900px;
}

.auto-layout #contents section#section-4{
  top: 1200px;
  left: 2700px;
}

.auto-layout #contents section#section-5{
  top: 2400px;
  left: 1800px;
}

.auto-layout #contents section#section-6{
  top: 2400px;
  left: 3600px;
}

.auto-layout #contents section#section-7{
  top: 3600px;
  left: 2700px;
}

.auto-layout .contents{
  padding-left: 150px;
  padding-right: 3em;
}

@media only screen and (min-width: 1140px){

  header, .contents, footer, 
  .horizontal-layout header, .horizontal-layout .contents, .horizontal-layout footer,
  .auto-layout .contents{
    padding-right: 3em;
    padding-left: 3em;
  }

  .horizontal-layout header h1{
    display: block;
  }

  .auto-layout header h1{
    margin-left: 0;
  }

  #navigation-menu{
    font-size: 1em;
  }

  .horizontal-layout #navigation-menu, .auto-layout #navigation-menu{
    right: 3em;
    left: auto;
    top: 1.55em;
  }

  #navigation-menu ul{
    -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px;
  }

  #navigation-menu li{
    float: left;
    margin: 3px 5px;
  }


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.kentunion.co.uk/assets/site_resources/jquery.malihu.PageScroll2id.min.js"></script>
<nav id="navigation-menu">
  <ul>
    <li><a href="#section-1"></a></li>
    <li><a href="#section-2"></a></li>
    <li><a href="#section-3"></a></li>
    <li><a href="#section-4"></a></li>
    <li><a href="#section-5"></a></li>
    <li><a href="#section-6"></a></li>
    <li><a href="#section-7"></a></li>
    <li><a href="#section-8"></a></li>
    <li><a href="#section-9"></a></li>
    <li><a href="#section-10"></a></li>
    <li><a href="#section-11"></a></li>
    <li><a href="#section-12"></a></li>
  </ul>
</nav>

<div id="contents">
  <section id="section-1">
    <div class="contents">
      <p>Our three year strategic plan ends in 2017 so we are busy writing our new one. Kent Union's plan outlines the priorities for our organisation and what we will be working on. It's really important that we get your input into our plan for 2017 - 2020. We are your students' union and improving your student experience here at the University of Kent is what we are here to do.</p>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-2">
    <div class="content">
      <h2>There are lots of different ways you can get involved in developing our new plan.</h2>
      <ul>
        <li>Take our survey to tell us how you feel about life at Kent and what you want us to work on</li>
        <li>Send us your feedback, on anything you think we need to know</li>
        <li>Sign up to take part in a focus group or interview</li>
      </ul>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-3">
    <div class="content">
      <p>How we're developing our new plan. We'll keep this section updated, so you can see our progress and what we've found out. </p>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-4">
    <div class="content">
      <h2>Stage 1</h2>
      <p>Desk based research to understand all the issues that might affect you. You can read our full report here, or for those of you without an hour to spare we've done a one page version</p>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-5">
    <div class="content">
      <h2>Stage 2</h2>
      <p>Interviews with senior university staff</p>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-6">
    <div class="content">
      <h2>Stage 3</h2>
      <p>Large scale survey with all our members</p>
      <hr /><a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a>
    </div>
  </section>
  <section id="section-7">
    <div class="content">
      <h2>Stage 4</h2>
      <p>Focus groups and interviews with some of you</p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
  <section id="section-8">
    <div class="content">
      <h2>Stage 5</h2>
      <p>Focus groups with secondary school and FE students, to understand their perspectives of studying at University </p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
  <section id="section-9">
    <div class="content">
      <h2>Stage 6</h2>
      <p>Presenting our draft plan at AGM in November for your feedback</p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
  <section id="section-10">
    <div class="content">
      <h2>Stage 7</h2>
      <p>Presenting our plan to the University of Kent's management team in December</p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
  <section id="section-11">
    <div class="content">
      <h2>Stage 8</h2>
      <p>Signing off our plan at our Board of Trustees in March</p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
  <section id="section-12">
    <div class="content">
      <h2>Stage 9</h2>
      <p>Launch of new Kent Union's plan in September 2017</p>
      <hr /><a href="#top">&uarr; Back to top</a>
    </div>
  </section>
</div>
<div id="background"><div></div></div>

2 个答案:

答案 0 :(得分：0)

关于您的代码段，按钮的偶然行为是由于css z-index（也在您的网站上），菜单li在很多情况下低于您的内容 - 这会阻止鼠标点击按钮。< / p>

据我所知，您的SetColumnValue(k,v)代码会禁用链接功能，从而阻止link.click(function(){执行此操作。特别是mPageScroll2id行已注释掉以重新启用它，这也适用于您的网站。

return false;中的整段代码似乎没有必要，因为它似乎与您的$("ul li a").each(function(){执行相同的角色，所以对于您的网站，我会考虑在没有它的情况下对其进行测试，然后如果它仍然需要注释掉返回假行。

mPageScroll2id
// container ref
    var sections = $('section');

    $("ul li a").each(function(){

        // link ref
        var link    = $(this);
        // section ref
        var section = $(link.attr('href'));

        // disable link

        link.click(function(){

            sections.mCustomScrollbar("scrollTo", section.position().top, {
			    timeout:0,
                scrollInertia:2000,
			});

            // disable original jumping
          //  return false;
        });
    });

$( document ).ready(function() {
(function($){
    $(window).on("load",function(){
        $("a[href*='#']").mPageScroll2id();
    });
})(jQuery);

$("#navigation a").mPageScroll2id({
  scrollSpeed:900
});
});
#background {
  background-image: url("/pageassets/test2/background.jpg");
  position: fixed;
  background-color: #E07853;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;

}
.content-spacing {
  padding: 0px !important;
}
#background div {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background-color: #ffffff;
  -khtml-opacity: .1;
  -moz-opacity: .1;
  opacity: .1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
a{
  color: inherit;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}

hr{
  display: block; 
  height: 0; 
  border: 0; 
  border-top: 1px solid rgba(0,0,0,0.2); 
  border-bottom: 1px solid rgba(255,255,255,0.2); 
  margin: 1em 0; 
  padding:0;
}

h1, h2, h3, p{
  margin-bottom: 1em;
}

h1, h2{
  font-family: 'Lobster Two',georgia,serif;
  line-height: 1em;
  font-weight: 700;
}

h2{
  font-size: 4em;
}

#navigation-menu {
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9;
}
header, #content, footer{
  position: relative;
}

header, footer{
  padding: 1em 3em;
  text-shadow: none;
}

header h1{
  color: #e6842c;
  font-size: 1.4em;
  font-style: italic;
}

nav ul, nav ol, nav li{
  list-style: none; 
  margin: 0; 
  padding: 0;
}
#navigation-menu ul{
  overflow: hidden;
  background: #564a44;
  background: rgba(0,0,0,0.5);
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

#navigation-menu li{
  margin: 3px;
}

#navigation-menu a{
  display: block;
  padding: 0.2em 0.6em;
  border-radius: 50%;
  height: 30px;
  border: 1px solid black;
  z-index: 550;
}

#navigation-menu a:hover, #navigation-menu a.mPS2id-highlight{
  background: #e6842c;
  color: #fff;
}

.content {
  z-index: 5;
  display: block;
  position: relative;
}

#contents section{
  text-align: center;
  min-height: 900px;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b5f59', endColorstr='#362f2d',GradientType=1 ); 
  color: #d9d6d5;
}

#contents section:nth-child(3n+2){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efe7dc', endColorstr='#c6b6a4',GradientType=1 ); 
  color: #25201e;
}

#contents section:nth-child(3n+3){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow: 0 -1px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6fbfc', endColorstr='#94cbce',GradientType=1 ); 
  color: #25201e;
}

.contents{
  padding: 1em 3em;
  z-index: 5;
  display: block;
  position: relative;
}

.contents hr + a, .content hr + a + a{
  margin-right: 2em;
}

.mPS2id-target .content h2:first-child:after{
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-left: 1em;
  font-size: 0.25em;
  line-height: 1.4em;
  font-style: italic;
  opacity: 0.7;
  width: 180px;
  font-family: arial,sans-serif;
  font-weight: normal;
}

.ie8 .mPS2id-target .content h2:first-child:after{
  font-size: 0.95em;
}

header, .content, footer{
  padding-right: 150px;
}

.horizontal-layout{
  width: 700%;
}

.horizontal-layout header h1{
  display: none;
}

.horizontal-layout #navigation-menu{
  right: auto;
  left: 3em;
  top: 4em;
}

.horizontal-layout #contents{
  overflow: hidden;
}

.horizontal-layout #contents section{
  width: 14.285%;
  float: left;
  min-height: 480px;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.6); 
  box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.6);
}

.horizontal-layout #content section:nth-child(3n+2),.horizontal-layout #content section:nth-child(3n+3){
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.2),inset 1px 0 0 rgba(255,255,255,0.5); 
  box-shadow: 0 -1px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),-1px 0 0 rgba(0,0,0,0.2),inset 1px 0 0 rgba(255,255,255,0.5);
}

.horizontal-layout .content h2{
  position: relative;
  padding-bottom: 50px;
}

.horizontal-layout .content h2 + p{
  margin-top: -50px;
}

.horizontal-layout .mPS2id-target .content h2:first-child:after{
  display: block;
  position: absolute;
  width: 100%;
  height: 50px;
  margin-left: 0;
}

.horizontal-layout header > *, .horizontal-layout footer > *{
  width: 10%;
}

.horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer{
  padding-left: 150px;
  padding-right: 3em;
}

.auto-layout{
  width: 6200px;
  height: 6200px;
}

.auto-layout header h1{
  margin-left: 150px;
}

.auto-layout #navigation-menu{
  right: auto;
  left: 2em;
}

.auto-layout #contents{
  height: 100%;
}

.auto-layout #contents section{
  position: absolute;
  min-height: 600px;
  width: 600px;
  top: 0;
  left: 0;
  margin-left: 3em;
  -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2); 
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.auto-layout #contents section#section-2{
  top: 0;
  left: 1800px;
}

.auto-layout #contents section#section-3{
  top: 1200px;
  left: 900px;
}

.auto-layout #contents section#section-4{
  top: 1200px;
  left: 2700px;
}

.auto-layout #contents section#section-5{
  top: 2400px;
  left: 1800px;
}

.auto-layout #contents section#section-6{
  top: 2400px;
  left: 3600px;
}

.auto-layout #contents section#section-7{
  top: 3600px;
  left: 2700px;
}

.auto-layout .contents{
  padding-left: 150px;
  padding-right: 3em;
}

@media only screen and (min-width: 1140px){

  header, .contents, footer, 
  .horizontal-layout header, .horizontal-layout .contents, .horizontal-layout footer,
  .auto-layout .contents{
    padding-right: 3em;
    padding-left: 3em;
  }

  .horizontal-layout header h1{
    display: block;
  }

  .auto-layout header h1{
    margin-left: 0;
  }

  #navigation-menu{
    font-size: 1em;
  }

  .horizontal-layout #navigation-menu, .auto-layout #navigation-menu{
    right: 3em;
    left: auto;
    top: 1.55em;
  }

  #navigation-menu ul{
    -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px;
  }

  #navigation-menu li{
    float: left;
    margin: 3px 5px;
  }


}

答案 1 :(得分：0)

我认为您的网页设计存在一个普遍问题以及scrollTop的工作方式。通常，scrollTop用于与窗口大小重叠的dom元素。您正在使用自定义滚动条将滚动事件绑定到滚动事件并更新它的top css属性以模拟滚动。基本上它正在将视口移动到更大的文档上：

<div id="mCSB_2_container" 
     class="mCSB_container" 
     style="position: relative; top: -10px; left: 0px;" <------
     dir="ltr">[Viewport]
</div>

如果您想坚持使用自定义滚动条，则必须实现自己的函数，该函数计算视口中的相对位置并操纵容器的top属性。

相关问题
最新问题