Question

我正在尝试实现平滑滚动，同时保留css：目标动画以及锚链接功能。

我认为问题来自于：目标状态由js操纵，从而覆盖了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分钟。

这里的滚动解决方案没有：目标状态操作和完整的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>

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

1 个答案: