如何动画导航栏返回网站顶部？

Question

Right now, I have successfully animated the navbar when scrolling down on the page. However, when I go back to the top, it resets immediately, so it's not as smooth of a website as I'd like. Can anybody help me with this using Javascript? Here's what I have so far:

JavaScript

$(function () {
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
    });
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('unscrolled', $(this).scrollTop() == $nav.height());
    });
});

CSS

    .topnav.scrolled {
        background-color: #000000;
        transition: background-color 200ms linear;
    }
    .topnav.unscrolled {
        background-color: transparent;
        transition: background-color 200ms linear;
    }

The "unscrolled" section doesn't work, so you can ignore it.

Answer 1

Without seeing the definition of your CSS classes, I wonder if the 'unscrolled' is added along with the 'scrolled' causing a conflict.

Can we see where you declare both .scrolled and .unscrolled ?

In the meantime, not knowing anything else, I would try like so:

$(function () {
  $(document).scroll(function () {
      var $nav = $(".topnav");
      $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); // add class 'scrolled' when doc.scrollTop > nav.height, remove when not
      $nav.toggleClass('unscrolled', $(this).scrollTop() <= $nav.height()); // add scroll 'unscrolled' when doc.scrollTop <= nav.height, remove when hot
    });
});

Answer 2

I usually use jQuery and have the header as fixed in the css and then this adds a class on scroll when the user has scrolled half way down the page so it is not instantly changing on scroll.

 $(window).scroll(function() {

    var $topNav = $(".topnav"),
        $scroll = $(window).scrollTop(),
        $wh = window.innerHeight / 2;

    if ($scroll > $wh) {
        $topNav.addClass("scrolled");
    } else {
        $topNav.removeClass("scrolled");
    }

});

You can change $wh to whatever you want, number or pixels from top etc...