Scroll to id only scrolls down

Question

I use fullpage.js and when I create a link and link it to an id it works fine but when I want to scroll up again I can't do that.

HTML:

<a href="#section2">click here</a>

jsfiddle

Can you post a better and full example of what you've done. It's hard to work with you when you post only a single line of HTML. Thanks. — Millhorn, Nov 19 '18 at 05:42
Welcome to Stackoverflow. I doubt that `css` has anything to do with your question. — Ahmad, Nov 19 '18 at 05:42
almost all I did for scrolling is that single line of HTML. I think the problem is related to js of the full page.js that I linked it in my post — Ali Mohamadpour, Nov 19 '18 at 05:47

score 0 · Answer 1 · answered Nov 19 '18 at 07:07

I've made a number of updates to yours. I just started over as I felt like yours was kind of everywhere. Here's your fiddle - See Fiddle

// variables
var $header_top = $('.header-top');
var $nav = $('nav');



// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});



// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: [],
  sectionSelector: '.vertical-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['home', 'about', 'contact'],
  menu: '#menu',

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
        $('#fp-nav').hide();
      }
  },

  onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
      $('#fp-nav').show();
    }
  },

  afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(false, 'up');
      $header_top.css('background', 'transparent');
      $nav.css('background', 'transparent');
      $(this).css('background', '#374140');
      $(this).find('h2').css('color', 'white');
      $(this).find('h3').css('color', 'white');
      $(this).find('p').css(
        {
          'color': '#DC3522',
          'opacity': 1,
          'transform': 'translateY(0)'
        }
      );
    }
  },

  onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(true, 'up');
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');
    }
  } 
});

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);



/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: "untitled-font-1";
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-up-open-big { display: inline-block; }

.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  color: black;
  -webkit-transition: color .3s;
          transition: color .3s;
}

.icon-up-open-big:hover:after {
 color: white; 
}

.scroll-icon {
 position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
   -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
           transform: translateX(-50%);
}



/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.l-left {
 float: left;
}

.l-right {
 float: right;
}

.end {
 margin-top: 30px;
 font-size: 3em;
 font-weight: bold;
 opacity: 0;
 -webkit-transform: translateY(300px);
     -ms-transform: translateY(300px);
         transform: translateY(300px);
 -webkit-transition: opacity, -webkit-transform 1s;
         transition: opacity, transform 1s;
 -webkit-transition-delay: 1s;
         transition-delay: 1s;
}



/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
 margin: 0;
 padding: 0;
 font-family: 'Alegreya Sans', Arial, sans-serif;
 text-transform: uppercase;
}

html {
 font-size: 62.5%;
}

body {
 color: black;
 letter-spacing: .18em;
}

a {
 text-decoration: none;
 color: white;
}

ul, li {
 list-style-type: none;
}



/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.header-top {
 background: rgba(0, 47, 77, .3);
 height: 70px;
 padding: 0 10px;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 12;
 box-sizing: border-box;
}

h1 {
 line-height: 70px;
 height: 70px;
}

h1 a {
 display: block;
 padding: 0 10px;
}

.toggle-menu {
 width: 50px;
 height: 50px;
 display: inline-block;
 position: relative;
 top: 10px;
}

.toggle-menu i {
 position: absolute;
 display: block;
 height: 2px;
 background: white;
 width: 30px;
 left: 10px;
 -webkit-transition: all .3s;
         transition: all .3s;
}

.toggle-menu i:nth-child(1) {
 top: 16px;
}

.toggle-menu i:nth-child(2) {
 top: 24px;
}

.toggle-menu i:nth-child(3) {
 top: 32px;
}

.open-menu i:nth-child(1) {
 top: 25px;
 -webkit-transform: rotateZ(45deg);
         transform: rotateZ(45deg);
}

.open-menu i:nth-child(2) {
 background: transparent;
}

.open-menu i:nth-child(3) {
 top: 25px;
 -webkit-transform: rotateZ(-45deg);
         transform: rotateZ(-45deg);
}

nav {
  height: 0;
 opacity: 0;
  box-sizing: border-box;
 background: rgba(0, 47, 77, .25);
 position: fixed;
 top: 70px;
 width: 100%;
  -webkit-transition: all 1s;
          transition: all 1s;
}

.open-menu ~ nav {
 opacity: 1;
  padding: 80px 0;
 z-index: 15;
 height: calc(90vh - 70px);
}

nav ul {
 padding: 0 10px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

nav li {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
}

nav li a {
 font-size: 2em;
 display: block;
 padding: 30px;
 text-align: center;
 -webkit-transition: background .3s;
         transition: background .3s;
}

nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
 background: #962D3E;
}

nav li:nth-child(even) a {
 background: #aa3346;
}

nav li:nth-child(odd) a:hover {
 background: #9e2f41;
}

nav li:nth-child(even) a:hover {
 background: #c53c52;
}

nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}
  


/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section { 
 text-align: center;
  /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}

h2 {
 text-transform: lowercase;
 font-size: 4em;
 margin-bottom: 20px;
}

h3 {
 font-weight: 300;
 font-size: 2.8em;
}



/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
 background: white;
 width: 8px;
 height: 8px;
 margin: -4px 0 0 -4px;
  display: none;
}

#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
 width: 16px;
 height: 16px;
 margin: -8px 0 0 -8px;
 background: transparent;
 box-sizing: border-box;
 border: 1px solid #24221F;
}



/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 767px) {
 nav ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
 }

 nav li {
  margin-top: 1px;
 }
  
  nav li a {
    font-size: 1.5em;
  }
  
  .scroll-icon {
    display: none;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  
  .open-menu ~ nav {
  padding: 20px 0;
 }

 nav li a {
  padding: 3px;
 }
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

<header>
  <div class="header-top clearfix">
    <h1 class="l-left"><a href="#home">Your Logo</a></h1>
    <a class="l-right toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
  </div>

  <nav class="hide">
    <ul id="menu">
      <li data-menuanchor="home">
        <a href="#home" title="First Section">Home</a>
      </li>
      <li data-menuanchor="about">
        <a href="#about" title="Second Section">About</a>
      </li>
      <li data-menuanchor="contact">
        <a href="#contact" title="Second Section">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div id="fullpage">
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>first slide in slideshow</h3>
    <div class="scroll-icon">
      <p>Jump into the next slide</p>
      <a href="#about" class="icon-up-open-big"></a>
    </div>    
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>second slide in slideshow</h3>
    <div class="scroll-icon">
      <p>Jump into the next slide</p>
      <a href="#contact" class="icon-up-open-big"></a>
    </div>      
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>third and final slide in slideshow</h3>
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2> 
    <h3>fourth slide in slideshow</h3>
  </section>
</div>

If this answer is correct, please make sure you mark it as correct. — Millhorn, Nov 20 '18 at 03:30

Scroll to id only scrolls down

1 Answers1