Question

有firefox 33.1的问题我的滚动到div并没有指向我的目标div id我使用聚合物core-scaffold作为我的导航但使用chrome工作正常

我的控制台上没有任何错误

这是我的剧本

<script>

    var scaffold = document.getElementById('scaffold');
    var menu = document.getElementById('menu');

    menu.addEventListener('core-select', function(e) {
      if (e.detail.isSelected) {
        scrollToSection(e.detail.item.getAttribute('name'));
      }
    });

    function scrollToSection(id) {
      var section = document.getElementById(id);
      if (section) {
        scaffold.$.headerPanel.scroller.scrollTop = section.offsetTop;
      }
    }

  </script>

这是我的导航代码

<core-scaffold id="scaffold" responsiveWidth="640px">
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Navigation</core-toolbar>
<core-menu id="menu">
<core-item name="drawerPanel" icon="home" label="Home"><a href="#"></a></core-item>
<core-item name="about" icon="account-circle" label="Who"></core-item>
<core-item name="works" icon="work" label="Works"></core-item>
<core-item name="skills-cont" icon="gesture" label="Skills" name="skills"></core-item>
<core-item name="contacts-cont" icon="settings-phone" label="Contacts"></core-item>
<core-item name="cart" icon="shopping-cart" label="D Shop"><a href="#" target="_blank"></a></core-item>
<core-item name="v8" icon="link" label="v8"><a href="" target="_blank"></a></core-item>
<core-item name="v7" icon="link" label="v7"><a href="" target="_blank"></a></core-item>
<core-item name="v6" icon="link" label="v6"><a href="" target="_blank"></a></core-item>
</core-menu>


<div id="about">
<about-koh></about-koh>
</div>


<div id="works">
<works></works>
</div>

....

是否可以更改offsetTop取决于浏览器，如果 in firefox 我想要 offsetTop -75 然后 in chrome 它会是 offsetTop -10 ？

Answer 1

确定发现原因是我的jquery脚本我有这个脚本，它有一个不同类的重复脚本，所以要修复它我删除重复的脚本。

我的旧脚本原因我遇到了问题

jQuery.noConflict();
jQuery(document).ready(function(){
    var i = 0;
    var posts = jQuery('.ab-effect').children();

    function animateCircle() {
        if (i % 2 === 0) {
            jQuery(posts[i]).addClass('visible animated fadeInUp');
        } else {
            jQuery(posts[i]).addClass('visible animated fadeInDown');
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }
    }

    function startAnimation() {
        setTimeout(function () {
            animateCircle();}, 1000);
    }

    posts.addClass('hidden');
    animateCircle(posts);
});

jQuery.noConflict();
jQuery(document).ready(function(){
    var i = 0;
    var posts = jQuery('.sk-effect').children();

    function animateCircle() {
        if (i % 2 === 0) {
            jQuery(posts[i]).addClass('visible animated fadeInUp');
        } else {
            jQuery(posts[i]).addClass('visible animated fadeInDown');
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }
    }

    function startAnimation() {
        setTimeout(function () {
            animateCircle();}, 1000);
    }

    posts.addClass('hidden');
    animateCircle(posts);
});

我的新脚本解决了我的问题 - 我只是删除了重复的脚本

jQuery.noConflict();
jQuery(document).ready(function(){
    var i = 0;
    var posts = jQuery('.ab-effect').children();

    function animateCircle() {
        if (i % 2 === 0) {
            jQuery(posts[i]).addClass('visible animated fadeInUp');
        } else {
            jQuery(posts[i]).addClass('visible animated fadeInDown');
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }
    }

    function startAnimation() {
        setTimeout(function () {
            animateCircle();}, 1000);
    }

    posts.addClass('hidden');
    animateCircle(posts);
});

滚动时不重定向到div id目标

1 个答案: