3

i have one page website. i added smoothscroll with js.

$(document).ready(function(){
    $("li > a").on('click', function(e) {
    if (this.hash !== "") {
      e.preventDefault();
      var hash = this.hash;

    $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function(){
     window.location.hash = hash;
     });
    }
   });
  });

and here's my navigation html code:

<li class="{{ slug == '/' ? 'active' : '' }}"><a href="#home">HOME</a></li>
<li class="{{ slug == '/about' ? 'active' : '' }}"><a href="#about">ABOUT</a></li>
<li class="{{ slug == '/blog' ? 'active' : '' }}"><a href="#blog">BLOG</a></li>

but when i go to another page (like blog), i got error top when click the navigation to go to onepage again. did i missed something?

Reza
  • 119
  • 2
  • 9
  • Check value of `$(hash).offset()` inside `animate` function using breakpoint or alert, if it is `undefined` then you know the cause of error – Pranav Singh Aug 16 '18 at 04:45

2 Answers2

0

Make sure you have placed related elements with a correct id in the page:

$(document).ready(function(){
    $("li > a").on('click', function(e) {
    if (this.hash !== "") {
      e.preventDefault();
      var hash = this.hash;
      if ($(hash).length > 0) {
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function() {
          window.location.hash = hash;
        });
      }
    }
   });
  });
ul {
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class=""><a href="#home">HOME</a></li>
  <li class=""><a href="#about">ABOUT</a></li>
  <li class=""><a href="#blog">BLOG</a></li>
</ul>

<div id="home" style="margin:500px 0;">
Home
</div>
<div id="about" style="margin:500px 0;">
About
</div>
<div id="blog" style="margin:500px 0;">
Blog
</div>
Chaska
  • 3,165
  • 1
  • 11
  • 17
  • yes, the id already correct. The problem only, when i go to blog page then wanna go to about, i've got error that top value is undefined. – Reza Aug 16 '18 at 04:32
  • I guess there's something else effecting your script. Would you post the whole html markup for debugging? – Chaska Aug 16 '18 at 04:42
  • How about warping `if ($(hash).length > 0) {` for `animate()` ? like my updated Snippet – Chaska Aug 16 '18 at 05:17
0

I hope your hash will be so '#about' and '#home' '#blog' when you get them.

plaease use your hash without '#', because your id is not with "#" right?

Akbar Soft
  • 1,028
  • 10
  • 19
  • when i used without #, i still got error about top value. – Reza Aug 16 '18 at 04:40
  • do you have a content with id="blog" and id="about" and id="home" ???? – Akbar Soft Aug 16 '18 at 04:43
  • var hash = this.hash.substring(1); try this one and make sure you have content with id="home" ...id="about" ... id="blog" – Akbar Soft Aug 16 '18 at 04:47
  • example: i open my web "http://myblog.com" then i go to about section "http://myblog.com/#about" and i go to blog "http://myblog.com/blog" but from blog, when i wanna go to about again, which is the url is "http://myblog.com/#about" the page won't working, coz the top value is undefined. but if i remove scrooltop js the navigation work at all. The problem only the top value – Reza Aug 16 '18 at 04:56
  • i can't show all html code, but the structure like this `

    Welcome

    About Us

    Our Blog

    `     – Reza Aug 16 '18 at 05:13
  • change : BLOG to : BLOG and remove -> "subtr(1)" that asked you to add above.. – Akbar Soft Aug 16 '18 at 05:23