Javascript click to scroll to the section not working in sidebar

user_6903912 0
Viewed 48

Scroll not working on the animate function, when clicked on the anchor tag it's not scrolling to the section. I have implemented sidebar and everything added inside sidebar

This all code is in page sidebar so when we click on href tab it's not going to that particular section. added alll the sample code and tried few more modifications in it but still unable to scroll on click of tab to that particular section.


<div class="side-overlay" id="side-overlay">
        <div class="faq_sidebar" id="faqs">
            <div class="container-fluid faq-section1">
                <div class="row">
                    <div class="col-md-11">
                        <h5 class="subscription-subhead">
                            FAQ’s
                        </h5>
                        <h2 class="subscription-title js-scroll fade-in-bottom">
                            You have questions,
                            we have answers
                        </h2>
                    </div>
                    <div class="col-md-1 faq_close">
                        <a href="javascript:void(0)" id="closefaqx" class="closebtn_faq" onclick="closeFaq()"><img src="./images/cross X.png" alt="" class="closebar"></a>
                    </div>
                </div>
            </div>

            <div class="faq_section2">
                
                <nav class="navigation" id="mainNav">
                    <a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
                    <a class="navigation__link" href="#2">Why do we use it?</a>
                    <a class="navigation__link" href="#3">Where does it come from?</a>
                    <a class="navigation__link" href="#4">Where can I get some?</a>
                    <a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
                </nav>

                <div class="tab-content">
                    <div class="nestednav">
                        <div class="page-section hero" id="1">
                            <h1>section 1</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="2">
                            <h1>section 2</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            
                        </div>
                        <div class="page-section" id="3">
                            <h1>Section Three</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="4">
                            <h1>Section Four</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="5">
                            <h1>Section Five</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>


** 

$(document).ready(function () {

        $('a[href*=\\#]').bind('click', function (e) {
            // e.preventDefault(); // prevent hard jump, the default behavior

            var target = $(this).attr("href");
            console.log(target);
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 600);
        });
    });

    e.addEventListener('scroll', () => {
        var scrollDistance = $(window).scrollTop();

        // Assign active class to nav links while scolling
        $('.page-section').each(function (i) {
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    });

    // 

    $(document).ready(function () {

        var fixmeTop = $('.navigation a').offset().top;       // get initial position of the element

        e.addEventListener('scroll', () => {
            var navlast = document.getElementsByClassName('navigation');
            var lastLi = navlast[navlast.length - 1];
            var currentScroll = $(window).scrollTop(); // get current position

            if (currentScroll >= fixmeTop) {
                console.log("Greater value");
                $('.navigation').css({
                    position: 'absolute',
                    top: '50px',
                    float: 'left'
                });
            }
            else {
                console.log("Smaller value");
                $('.navigation').css({
                    position: 'fixed',
                    top: '80px',
                    float: 'left'
                });
            }
        });
    });

**
css html javascript
2 Answers

You are attaching events to an undefined variable e. You will have more success using window instead.

$(document).ready(function () {

        $('a[href*=\\#]').bind('click', function (e) {
            // e.preventDefault(); // prevent hard jump, the default behavior

            var target = $(this).attr("href");
            console.log(target);
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 600);
        });
    });

    window.addEventListener('scroll', () => {
        var scrollDistance = $(window).scrollTop();

        // Assign active class to nav links while scolling
        $('.page-section').each(function (i) {
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    });

    // 

    $(document).ready(function () {

        var fixmeTop = $('.navigation a').offset().top;       // get initial position of the element

        window.addEventListener('scroll', () => {
            var navlast = document.getElementsByClassName('navigation');
            var lastLi = navlast[navlast.length - 1];
            var currentScroll = $(window).scrollTop(); // get current position

            if (currentScroll >= fixmeTop) {
                console.log("Greater value");
                $('.navigation').css({
                    position: 'absolute',
                    top: '50px',
                    float: 'left'
                });
            }
            else {
                console.log("Smaller value");
                $('.navigation').css({
                    position: 'fixed',
                    top: '80px',
                    float: 'left'
                });
            }
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-overlay" id="side-overlay">
        <div class="faq_sidebar" id="faqs">
            <div class="container-fluid faq-section1">
                <div class="row">
                    <div class="col-md-11">
                        <h5 class="subscription-subhead">
                            FAQ’s
                        </h5>
                        <h2 class="subscription-title js-scroll fade-in-bottom">
                            You have questions,
                            we have answers
                        </h2>
                    </div>
                    <div class="col-md-1 faq_close">
                        <a href="javascript:void(0)" id="closefaqx" class="closebtn_faq" onclick="closeFaq()"><img src="./images/cross X.png" alt="" class="closebar"></a>
                    </div>
                </div>
            </div>

            <div class="faq_section2">
                
                <nav class="navigation" id="mainNav">
                    <a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
                    <a class="navigation__link" href="#2">Why do we use it?</a>
                    <a class="navigation__link" href="#3">Where does it come from?</a>
                    <a class="navigation__link" href="#4">Where can I get some?</a>
                    <a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
                </nav>

                <div class="tab-content">
                    <div class="nestednav">
                        <div class="page-section hero" id="1">
                            <h1>section 1</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="2">
                            <h1>section 2</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            
                        </div>
                        <div class="page-section" id="3">
                            <h1>Section Three</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="4">
                            <h1>Section Four</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                        <div class="page-section" id="5">
                            <h1>Section Five</h1>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

Why?

addEventListener() requires a target for the event listener to attach to. Read more here.

Also ask yourself what is e? It's often used as a reference to the event target in an event handler function as this abbreviation, example:

x.addEventListener('foo', function(e) {...}

There's loads of documentation on this massive object, but I would recommend exploring it in the console yourself. Try changing one of the above lines to:

window.addEventListener('scroll', (e) => { console.log(e); ...

And view the output in your browser's inspector.

user_82736860

The below code is working fine with me now posting just if anyone wants to find the answer -

$(document).ready(function () {

        $('a[href*=\\#]').bind('click', function (e) {

            var target = $(this).attr("href");
            console.log(target);
            $('.tab-content').animate();
        });
    });

    e.addEventListener('scroll', () => {
        var scrollDistance = $(window).scrollTop();

        // Assign active class to nav links while scolling
        $('.page-section').each(function (i) {
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    });

    // 

    $(document).ready(function () {

        var fixmeTop = $('.navigation a').offset().top;       // get initial position of the element
        var fixmeTop2 = $('.tab-content').offset().top; 


        e.addEventListener('wheel', (event) => {

            fixmeTop2 = $('.nestednav').offset().top;
            if (event.deltaY >= 20) {
                $('.navigation').css({
                    position: 'fixed',
                    top: '10px',
                    float: 'left'
                });
            }
            else if(fixmeTop2 >= 15) {
                $('.navigation').css({
                    position: 'absolute',
                    top: '180px',
                    float: 'left'
                });
            }
        });
    });
user_69039120
Related