3

I'm using Malihu's custom scrollbar plugin and wanted to add the 'Scroll to id' plugin in conjunction with it. The code provided in my snippet works how I want it to (although sometimes the buttons don't seem to work).

The main problem is when I put this code into my site something is preventing it from working. As you scroll down the page the correct dots highlight in the right section but if you click the dots they don't navigate to the right section, they don't do anything at all.

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>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
user2953989
  • 2,791
  • 10
  • 36
  • 49

2 Answers2

0

Regarding your snippet the occasional behaviour of your buttons is due to the css z-indexes (also on your site) the menu li is lower than your content in many cases - which is preventing the mouse click from reaching the button.

As far as I can tell from your site your link.click(function(){ code is disabling the link functionality, thus preventing mPageScroll2id from doing its thing. Specifically the return false; line which has been commented out to re enable it, this should also work on your site.

The whole section of code within your $("ul li a").each(function(){ doesn't appear to be necessary as it appears to be performing the same role as your mPageScroll2id so for your site I would consider testing it without it altogether, and then if it's still needed comment out the return false line.

// 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>
Sam0
  • 1,459
  • 1
  • 11
  • 13
0

I think there is a general problem within your page design and how scrollTop would work. In general scrollTop is meant to be used for dom elements that are overlapping the window size. You are using a custom scrollbar that bind's to the scroll event and updates it's top css property to simulate a scroll. Basically it's moving a viewport over a larger document:

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

If you want to stick to the custom scrollbar you have to implement your own function that calculates the relative position within the viewport and manipulates the top attribute of the container.

Alexander Heimbuch
  • 657
  • 9
  • 14