클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다.
또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다.

부드럽게 스크롤링의 접근성

원활한 스크롤링을 위해 어떤 기술을 사용 하든지 접근성이 중요하다.
예를 들어 #hash 링크를 클릭하면 브라우저가 해당 ID와 일치하는 요소로 포커스를 변경한다. 그냥 페이지 스크롤 할 경우 부드럽게 스크롤이 될 수 있지만 포커스 변경의 되지 않는 부작용이 있다.

기본 포커스 변경행동을 재정의 하려면 포커스 변경을 직접 처리해야한다. (즉, 즉각적인 스크롤을 방지하고 부드러운 스크롤을 가능하게 하기 위해…)

jQuery로 부드럽게 스크롤 하기

같은 페이지에서 앵커로 부드러운 페이지 스크롤을 수행하는 코드는 다음과 같다.
점프 링크를 식별하고 다른 링크를 대상으로하지 않기 위해 일부 논리가 내장되어 있습니다.

// 해쉬가 있는 모든 링크
  $('a[href*="#"]')
  // 아무것도 연결하지 않는 링크 삭제
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // 페이지 링크
    if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) {
      // 스크롤 할 요소를 찾는다.
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // 스크롤 대상인지 체크
      if (target.length) {
        // 애니메이션이 발생할 경우에만 이벤트 방지
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // 애니메이션이 끝난 후
          // 포커스 변경
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // 타켓이 포커스 되어 있는지 체크
            return false;
          } else {
            $target.attr('tabindex','-1'); // 포커스가 없는 요소에 tabindex 추가
            $target.focus();
          }
        });
      }
    }
  });

샘플 화면

적용 된 데모 페이지 보기

참조 URL