Как убрать баги при работе skroll?

Question

[Hyubert]

И снова у меня проблемы с скроллом.

Есть такой код, здесь скрол работает по анкорам , но есть и силки по анкорам, но оны не связаны между собой , и поэтому при нажатии на ссылку работа колеса мыши нарушается ( если через ссылку перейти на второй блок , а потом скролить ниже , то скрол пойдеш у верх(попробуйте по ссылке ниже)).

Нужно решить 2 проблемы, которые я сам к сожалению решить не могу:

1)как-то связать силки и скрол, штоб они работали коректно

2)с последнего блока , если крутить у низ кинет на первый, нужно что-то сделать штоб етого не было

codepen.io/anon/pen/XXEYjQ

Очень прошу помоч, спасибо.

Answer 1

[Ольга Грабко]

codepen.io/anon/pen/adYQZB

Comments

[Hyubert]

при более сложной структуре перестает работать, почему?

[Ольга Грабко]

ссыль?

[Hyubert]

Ольга Грабко: codepen.io/anon/pen/XXEYjQ

[Ольга Грабко]

codepen.io/anon/pen/wMjrMd

[Hyubert]

Ольга Грабко: большое спасибо, а можете объяснить, как вы это зделали?

[Ольга Грабко]

1) строка 10 - при клике на якорь присвоила currentAnchor номер элемента, на который якорь ссылается (последняя правка, после усложнения структуры: номер элемента изменился, $(el).index('.box'); - уточнила, что номер элемента в наборе с классом box, а не вообще). 2) строки 36-41, у вас было условие: если currentAnchor меньше равно 0 или больше длины набора -1, currentAnchor = 0; исправила на: если меньше равно 0, currentAnchor = 0; если больше длины набора currentAnchor = последний элемент в наборе.

[Hyubert]

Ольга Грабко: спасибо, а можна както отслеживать позицию скрола? напремер если он на втором блоке то на навинации он темнее

[Ольга Грабко]

codepen.io/anon/pen/wMjrMd

Answer 2

[Andrzej Wielski]

Используйте готовые библиотеки для fullpage скроллинга.
К примеру, fullPage.js
alvarotrigo.com/fullPage

Код сократится в разы:

$(document).ready(function() {
    $('#fullpage').fullpage();
});

Да и у него куча настроек:

$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: '#menu',
        lockAnchors: false,
        anchors:['firstPage', 'secondPage'],
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        sectionsColor : ['#ccc', '#fff'],
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});
      

Comments

[Hyubert]

не , плагин не подходит ,нужно трансфомировать мой код

(в плагинах много лишнего , что я и так использовать не буду, а вес он дает)