實現平滑滾動，同時保留：target css動畫功能

Question

我正在嘗試實現平滑滾動，同時保持css：target動畫完好無損，並具有錨鏈接的功能。

我認為問題出在js操縱的：target狀態，從而覆蓋了CSS動畫。 為了吸引人們注意所選＃部分的標題，我在：target上略微更改了填充，如下所示：

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;
}

它完全按照我的意願作為動畫工作，除了錨鏈接當然會導致頁面跳轉而不是平滑的滾動動作。 問題出現在添加時：

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;
        }
    }
});

試圖使頁面過渡更加平滑。 我曾嘗試使用其他jQuery插件來操縱頁面位置，但可惜沒有用（而且我沒有js // jQuery經驗）。 我會珍惜任何幫助或技巧，並使我的訪客更加快樂。 謝謝 ：）

Answer 1

糟糕，發布時間過早約30分鍾。

這是沒有：target狀態操縱和完整URL更改的滾動解決方案，如果其他人遇到此問題，該解決方案：

  <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>