Malihu 自定义滚动条 - 滚动到 id 插件在页面中不起作用

Posted

技术标签:

【中文标题】Malihu 自定义滚动条 - 滚动到 id 插件在页面中不起作用【英文标题】：Malihu custom scrollbar - scroll to id plugin not working in page 【发布时间】：2017-02-21 12:35:14 【问题描述】：

我正在使用 Malihu 的自定义滚动条插件，并希望将“滚动到 id”插件与它一起添加。我的 sn-p 中提供的代码按我的意愿工作（尽管有时按钮似乎不起作用）。

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

页面：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>

【问题讨论】：

【参考方案1】：

关于您的 sn-p，您的按钮的偶尔行为是由于 css z-indexes（也在您的网站上）在许多情况下菜单 li 低于您的内容 - 这会阻止鼠标点击到达按钮.

据我从您的网站得知，您的link.click(function() 代码正在禁用链接功能，从而阻止mPageScroll2id 执行此操作。特别是 return false; 行已被注释掉以重新启用它，这也应该在您的网站上工作。

您的$("ul li a").each(function() 中的整个代码部分似乎没有必要，因为它似乎与您的mPageScroll2id 执行相同的角色，因此对于您的网站，我会考虑完全不使用它进行测试，然后如果仍然需要注释掉 return false 行。

// 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;
  



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.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" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-2" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-3" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-4" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-5" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-6" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-7" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-8" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-9" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-10" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-11" rel="m_PageScroll2id"></a></li>
    <li><a href="#section-12" rel="m_PageScroll2id"></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="#section-2" 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="#section-3" 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="#section-4" 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="#section-5" 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="#section-6" 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="#section-7" 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】：

我认为您的页面设计存在一个普遍问题，以及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 属性。

【讨论】：

以上是关于Malihu 自定义滚动条 - 滚动到 id 插件在页面中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

mCustomScrollbar插件自定义滚动条

如何在调整大小时更改 Malihu 自定义滚动条 snapAmoun？

malihu 自定义滚动条将 <div class='mCSB_draggerRail'></div> 在电子上的错误位置

前端模拟滚动条插件

如何在 ReactJS 中自定义 malihu-custom-scrollbar-plugin？

H5自定义滚动插件——DeftScroll.js,可自定义滚动条