实现平滑滚动，同时保留：target css动画功能

Question

i am trying to implement smooth scrolling while leaving css :target animations in tact and functional for anchor links.

i believe the problem comes from the :target state being manipulated by the js, and thus overriding the css animations. in order to draw attention to the headline of a selected # section, i change the padding slightly on :target, like so:

html

<section id="part_main">   
    <div class="text_box">
        <h1>To <a href="#">Section</a></h1>
    </div >
</section>

...

<section id="#">
    <div class="text_box">
        <h2>Headline Animation through Target</h2>
        <h3>body copy</h3>
    </div>
</section>

css

@-webkit-keyframes target {
    from {  padding-left: 0px;  } 
    50% {   padding-left: 20px; }
    to {    padding-left: 0px;  }
    }

:target div h2 {
    -webkit-animation-name:target;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:linear;
}

it works as an animation exactly as i would like, except that the anchor link of course causes a page jump instead of smooth scrolling action. and the problem comes when adding:

js

<script>
        $('a[href*=#]:not([href=#])').click(function(e) {
            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) {
              $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

in an attempt to make that page transition smoother. i have tried using other jQuery plugins for manipulating page location, but sadly to no avail (and i do not have js // jQuery experience). any help or tips would be cherished by me and make my visitors eyes happier. thank you :)

Answer 1

oops, posted about 30 min too early.

here's the scrolling solution without :target state manipulation and full URL change, solution should anyone else run into the problem:

  <script>
var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
    </script>