I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down.
Here is the HTML code:
<a href="#section2">click here</a>You can view the example on jsfiddle.
I have completely overhauled your code with numerous improvements. The original version seemed disorganized, so I decided to start fresh. You can see the updated code at this Fiddle link
// Declare variables
var $header_top = $('.header-top');
var $nav = $('nav');
// Toggle menu functionality
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// Customize fullpage settings
$('#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)'
}
);
}
},
...
</section>
</div>
</div></answer1>
<exanswer1><div class="answer" i="53369819" l="4.0" c="1542600471" a="TWlsbGhvcm4=" ai="2464865">
<p>I have made several updates to your code. I decided to start from scratch because it seemed a bit scattered. You can view the updated version on <a href="http://jsfiddle.net/webfrogs/okfyqn4x/" rel="nofollow noreferrer">this Fiddle link</a></p>
<div>
<pre><code>// 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) {
$heeader_top.css('background', 'rgba(0, 47, 77, .3)');
$vanv.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)'
}
);
}
},
...
</section>
</div>
</div></answer1>
<exanswer1><div class="answer" i="53369819" l="4.0" c="1542600471" a="TWlsbGhvcm4=" ai="2464865">
<p>I've implemented several enhancements in your code. I chose to begin anew as the existing code appeared helter-skelter. Feel free to check out the updated version on this Fiddle - <a href="http://jsfiddle.net/webfrogs/okfyqn4x/" rel="nofollow noreferrer">See Fiddle</a></p>
<p><div>
<div>
<pre class="lang-js"><code>// Variable declarations
var $header_top = $('.header-top');
var $nav = $('nav');
// Menu toggle functionality
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// Setting up 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)'
}
);
}
},
...
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
/* Icon styles using custom font */
... // CSS for icon styling
/* Helper classes */
... // Additional CSS helper classes
/* Reset general styles */
... // General style reset rules
/* Navigation styles */
... // Styling for header and top navigation bar
/* Section styles for fullPage.js */
... // Styles specific to different sections
/* SlideNav styles for fullPage.js*/
... // Style rules for slide navigation
/* Media query styles */
... // Responsive design styles
}<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">
... // Navigation list items
</ul>
</nav>
</header>
<div id="fullpage">
... // Sections content
</div>I have an array object structured like this. [ { "name": "name1", "type": "type1", "car": "car1", "speed": 1 }, { "name": &q ...
I'm having trouble understanding the concept of promises in AngularJS. Here is a provider I have: var packingProvider = angular.module('packingProvider',[]); packingProvider.provider('packingProvider',function(){ ...
Having some trouble with the UK Parliament API, I keep encountering this error: XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not a ...
https://i.stack.imgur.com/vJMyg.png I noticed that the password label on my login form does not float when the browser's password manager auto-completes. Can someone help me fix this issue? Attached is an image for reference. /* login form ...
I've been struggling to send a C# object as JSON array to an API endpoint. I feel like I'm going crazy trying to solve these issues. Here's a sample of the JSON data: Array ( [user_id] => 0002323445635 [order] => {"order":{" ...
I've been working on a website and I'm trying to create a navigation bar similar to the one found at . My goal is to have the navbar transition from transparent to a colored background as the user scrolls down the page. For this project, I am ut ...
Is there a way to resize an image automatically to fit inside a container with a blank background? Currently, the structure looks like this: <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> ...
I am facing a challenge with updating the page on my SPA application after a successful login. I have successfully sent the form data to the API using a proxy, but now the API responds with a user_ID in JSON format. However, I'm struggling with making ...
In my current project, I have a JavaScript array structured as follows: var items = [{ ID: "1" count:'1', File: (binary file) }, { ID: "2" count:'2', File: (binary file) } ] My goal is to ...
Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...
Currently, my footer is showing up at the top of the page but I really want it to be at the bottom. I'm new to HTML so apologies if this is a simple fix. Here is my file with internal CSS: .middle { position: fixed; top: 50%; left: 50%; tr ...
I recently added redux-persist to my project and now I am facing an issue where all of my Redux states are returning undefined. Previously, all the Redux states were functioning properly. However, after incorporating redux-persist, they are no longer work ...
Whenever I click on the project element in my HeadlessCMS with the URL /projects/slug-name, the projects button in my Navbar (LinkItem) does not highlight with a background color (bgColor). How can I modify this line of code: const active = path === href / ...
I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...
I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...
Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...
In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...
New to the world of JavaScript, I am trying my hand at implementing the jQuery UI datepicker widget. My goal is to add an additional line to the widget parameters if the variable selectedDate has a value. However, my current approach seems to be ineffecti ...
Currently, I am working on upgrading my formGroups to be strictly typed in Angular v14. Within my FormGroup, there is a specific block of logic that iterates through all the controls and performs an action (this part is not crucial as I am facing issues be ...
I am currently facing an issue with e-mail templates that include images. The problem arises from the fact that these images need to be downloaded before they can be displayed in the email. To work around this, I always use ALT and TITLE tags to provide de ...