Question

我在尝试在我正在处理的项目上实现此功能时遇到了一些问题。基本上，目标是如果用户点击“开始”按钮，它将直接滚动指定的元素。唯一的问题是它不适用于chrome或safari这是非常奇怪的，有时网站往往随机闪烁，只要我点击它

这是我正在处理的网站

digitalspin.ph/create/index.html

HTML

<section class="get_started">
<div class="container_12">
    <div class="grid_12 relative">
        <h2 id="gs_button"><a href="#company_info"><span>Get<br/> Started</span></a></h2>
    </div>
</div>
</section>


<div class="content">
<div id="company_info" class="container_12">
    <h2 class="creative_spin_small">Creative Spin</h2>
    <div class="liquid-slider"  id="main-slider">
        <div class="slide1">
        <h2 class="title">Who We Are</h2>
        <div class="custom_column">
            <div class="message">
                <h3>turning</h3>
                <h4>your</h4>
                <h5>imagination</h5>
                <h6>into <span>reality</span></h6>
            </div>
        </div>
        <div class="custom_column">
        grid 6
        </div>
        </div>

        <div>
        <h2 class="title">What We Can Do</h2>
        <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
        </div>      

    </div>
</div>
<div class="social">
    <ul>
        <li><a href="#" target="_blank" alt="Facebook">Facebook</a></li>
        <li id="social_twitter"><a href="#" target="_blank" alt="Twitter">Twitter</a></li>
    </ul>
</div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
    $("#gs_button").click(function() {
    $('html, body').animate({
    scrollTop: ($("#company_info").first().offset().top)
    }, 1200);
    });
})
</script>

Answer 1

当您点击heading gs_button时，anchor tag中的heading也会获得clicked，因此您的animate function无效，请尝试在{{1}上绑定点击事件而不是anchor喜欢，

heading

希望这有效。

Demo检查$(document).ready(function(){ $("#gs_button a").click(function(e) {// bind anchor here $('html, body').animate({ scrollTop: ($("#company_info").offset().top) }, 1200); e.preventDefault();// to prevent default working of anchor; }); });和Firefox。

Answer 2

错误在于webkit能够为身体制作动画。相反，在body中创建一个div并将动画应用于此...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

注意：根据我的个人经验，ID可以同样有效地应用于标记而不是冗余，这仍然有用...我在这个示例中只是这样做了因为有些用户注意到在DOM树上比ID更高的目标ID的问题...我无法亲自重现那个问题，所以嘿，无论哪种方式都有效！

然后设置包装元素和正文的样式以正确运行

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

然后是jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});

滚动到Element Jquery无法在Chrome或Safari上运行

2 个答案: