Greetings. I do navigation on a landing page on sections. The problem is such an error:

Cannot read property 'top' of undefined

on the line:

var reqSectionPos = reqSection.offset().top; 

 $(document).ready(function() { $('.link').on('click', function(e) { e.preventDefault(); showSection($(this).attr('href'), true); }); showSection(window.location.hash, false); }); $(window).scroll(function() { checkSection(); }); function showSection(section, isAnimate) { var direction = section.replace(/#/, ''); var reqSection = $('.section').filter('[data-section="' + direction + '"]'); var reqSectionPos = reqSection.offset().top; if (isAnimate) { $('body, html').animate({ scrollTop: reqSectionPos }, 600); } else { $('body, html').scrollTop(reqSectionPos); } } function checkSection() { $('.section').each(function() { var $this = $(this), topEdge = $this.offset().top, bottomEdge = topEdge + $this.height(), wScroll = $(window).scrollTop(); if (topEdge < wScroll && bottomEdge > wScroll) { var currentId = $this.data('section'); reqLink = $('.link').filter('[href="#' + currentId + '"]'); reqLink.closest('item').addClass('active') .siblings().removeClass('active'); window.location.hash = currentId; } }); } 
 html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; } ul { margin: 0; width: 100%; background: #fff; list-style-type: none; position: fixed; top: 0; left: 0; text-align: center; } .section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 25%; text-align: center; text-transform: uppercase; color: #fff; height: 100%; width: 100%; } .item { display: inline-block; padding: 15px; } .item .active { border: 3px solid #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="item"><a class="link" href="#">one</a> </li> <li class="item"><a class="link" href="#">two</a> </li> <li class="item"><a class="link" href="#">three</a> </li> </ul> <div class="wrapper" style="height: 100%;"> <div data-section="one" class="section" style=" background: #000;">title1</div> <div data-section="two" class="section" style="background: #434;">title2</div> <div data-section="three" class="section" style="background: #919;">title3</div> </div>

Code in the sandbox

  • one
    all necessary code must be directly in question. Link can serve as a supplement - Grundy
  • And what result did you expect by changing the "#" sign in the "#" line to ''? - Grundy
  • remove the grille from href - Anatoly
  • but in the example, all href is "#" and by removing the grid, you will always get an empty line - Grundy
  • Understood thanks! - Anatoly

1 answer 1

In this case, there is an attempt to determine the section to which you want to go, it turns out URL.

But in the markup of all links is href="#"

Therefore, the selector below

 $('.section').filter('[data-section="' + direction + '"]')

does not find a single element satisfying the condition, since the direction for all links is an empty string.

It is necessary to specify the corresponding section for each link.

And also add a check in the case that hash is not specified.

 $(document).ready(function() { $('.link').on('click', function(e) { e.preventDefault(); showSection($(this).attr('href'), true); }); showSection(window.location.hash, false); }); $(window).scroll(function() { checkSection(); }); function showSection(section, isAnimate) { var direction = section.replace(/#/, '')||'one'; var reqSection = $('.section').filter('[data-section="' + direction + '"]'); var reqSectionPos = reqSection.offset().top; if (isAnimate) { $('body, html').animate({ scrollTop: reqSectionPos }, 600); } else { $('body, html').scrollTop(reqSectionPos); } } function checkSection() { $('.section').each(function() { var $this = $(this), topEdge = $this.offset().top, bottomEdge = topEdge + $this.height(), wScroll = $(window).scrollTop(); if (topEdge < wScroll && bottomEdge > wScroll) { var currentId = $this.data('section'); reqLink = $('.link').filter('[href="#' + currentId + '"]'); reqLink.closest('item').addClass('active') .siblings().removeClass('active'); window.location.hash = currentId; } }); } 
 html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; } ul { margin: 0; width: 100%; background: #fff; list-style-type: none; position: fixed; top: 0; left: 0; text-align: center; } .section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 25%; text-align: center; text-transform: uppercase; color: #fff; height: 100%; width: 100%; } .item { display: inline-block; padding: 15px; } .item .active { border: 3px solid #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="item"><a class="link" href="#one">one</a> </li> <li class="item"><a class="link" href="#two">two</a> </li> <li class="item"><a class="link" href="#three">three</a> </li> </ul> <div class="wrapper" style="height: 100%;"> <div data-section="one" class="section" style=" background: #000;">title1</div> <div data-section="two" class="section" style="background: #434;">title2</div> <div data-section="three" class="section" style="background: #919;">title3</div> </div>