Issue with html and javascript (smooth scrolling)

Question

I tried adding smooth scrolling to my website. After copying the javascript and jquery from this website: http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/ I added the tags for the smooth scrolling. The smooth scrolling works for everything except one button on the nav bar. This is the code:

<nav id="nav">
  <div class="navbar">
    <div class="brand"><a href="#" class="smoothScroll">hbvhaf</a></div>
    <ul>
      <li><a href="#welcome" class="smoothScroll"><span>about</span></a></li>
      <li><a href="#hotelinfo" class="smoothScroll"><span>bvdsvudva</span></a></li>
      <li><a href="#dining" class="smoothScroll"><span>contact</span></a></li>

    </ul>
  </div><!-- navbar -->
</nav>

The one button that doesn't smooth scroll is the one that has a div class of "brand". The div is used to specifically style that button in css. Any ideas.

I think it's because your JS code is targeting 'li' elements. The "Brand", is within a div. — user7582130
– user7582130, Commented Mar 6, 2017 at 22:16

Neil · Accepted Answer · 2017-03-06 22:51:21Z

1

I know that this is a bit of a hack, but why don't you just add this to the top of the page:

<div name="top"></div>

And then change your code to:

<nav id="nav">
  <div class="navbar">
    <div class="brand"><a href="#top" class="smoothScroll">hbvhaf</a></div>
    <ul>
      <li><a href="#welcome" class="smoothScroll"><span>about</span></a></li>
      <li><a href="#hotelinfo" class="smoothScroll"><span>bvdsvudva</span></a></li>
      <li><a href="#dining" class="smoothScroll"><span>contact</span></a></li>

    </ul>
  </div><!-- navbar -->
</nav>

Edit for author, example of it working properly:

<div name="top">I am the top of the page.</div>
<a href="#contact" class="smoothScroll">Go To Contact Form</a>

<div style="height:200%"></div>

<div name="contact">contact</div>
<a href="#top" class="smoothScroll">Back to top</a>

<div style="height:200%"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>

edited Mar 6, 2017 at 22:51

answered Mar 6, 2017 at 22:20

Neil

14.3k3 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

skyper12345 Over a year ago

So, I should put all the code in between the div tag of "top"?

Neil Over a year ago

No, I meant add the div tag at the top of the webpage. Like right after <body>.

skyper12345 Over a year ago

I did that although the smooth scrolling only scrolls back up, not down. Do you have any other tips?

Neil Over a year ago

The reason why I am confused is, I wrote mini version for myself (now added to my post) that works fine.

skyper12345 Over a year ago

I am as confused as you are. When I press the button I made to go down, it pauses for a second and then it just jumps to #top without smooth scrolling. Could I change the js to include the button with the div. Do you have any other ideas. Anything is much appreciated. edit: I got it to work. My issue was that I forgot to add the smooth scroll tag to the button that linked to #top. Thanks for all your help.

|

Collectives™ on Stack Overflow

Issue with html and javascript (smooth scrolling)

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related