滚动到ID仅向下滚动

Question

我使用fullpage.js ，当我创建一个链接并将其链接到一个id时，它可以正常工作，但是当我想再次向上滚动时，我不能这样做。

HTML：

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

的jsfiddle

Answer 1

我已经对您进行了一些更新。 我刚开始，因为我觉得到处都是你的。 这是您的小提琴- 请参阅小提琴

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