page will not scroll back to top after reaching bottom end

[vnevermore]

Description

hello, I've noticed a weird behaviour on my webpage. Once you reach the bottom end of the index, it will not scroll back to back anyway. Settings i am using scrollBar: true, responsive: 768, autoScrolling: true, scrollOverflow: true,

Link to isolated reproduction with no external CSS / JS

https://jsfiddle.net/vy958eht/

Steps to reproduce it

1. Scroll to the bottom
2. Try to scroll back to top

Versions

Tested on latest chrome revision

[alvarotrigo]

We don't check personal websites on this forum.

Can you please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.

[vnevermore]

Sorry i've updated the topic with jsfindle

[alvarotrigo]

You can't use both scrollOverflow:true and scrollBar: true at the same time.

If you don't plan on having scrollable content, remove scrollOverflow:true. If you plan on having scrollable content, remove scrollBar:true.

[alvarotrigo]

This should get fixed in fullpage.js version 4.

[vnevermore]

Thanks for the answer! I am afraid I will have to wait for the version 4 release as I am using the above script to trigger animation start of SVG on scroll over a specific location and it seems to works only with scrollBar set to true. If I set it to false, then I will lose the SVG animation trigger thing, and if i set it to true, i am getting the weird bug with the scroll.

<script>
   document.addEventListener( 'wheel', this.onMouseWheel, {passive: false} );
   
      // Get the position on the page of the SVG
      var svgLocation = document.getElementById("mySVG").getBoundingClientRect();
      
      // Scroll offset that triggers animation start.
      // In this case it is the bottom of the SVG.
      var offsetToTriggerAnimation = svgLocation.y;
      
      // Function to handle the scroll event.
      // Add an event handler to the document for the "onscroll" event
      function scrollAnimTriggerCheck(evt)
      {
        var viewBottom = window.scrollY + window.innerHeight;
        if (viewBottom > offsetToTriggerAnimation) {
      document.getElementById('mySVG').classList.add('start');
        }
      }
    
      // Add an event handler to the document for the "onscroll" event
      document.addEventListener("scroll", scrollAnimTriggerCheck);
      
</script>

Is there any other way to add a 'start' class on SVG over scrolling a specific section using your inbuild functions, so i can keep scrollBar to false and keep having the same effect?

[alvarotrigo]

You can consider using css state classes to trigger animations or fullpage.js callbacks. Examples on the examples folder.

https://github.com/alvarotrigo/fullPage.js/blob/master/examples/trigger-animations.html