iWeb iFrame 和平滑滚动问题

Question

我正在使用 iWeb（很糟糕，但我必须使用它，说来话长）。

我设法在页面上实现了一些平滑的滚动 link，但我无法让它滚动到正确的位置。

这是我加载到 iframe 中的 "HTML Widget" 代码（仅供参考，这是菜单）：

<html>
<head>
<script type="text/javascript">

// the var's are referneces to iWeb's generated div's have to publish and get id's
  var about     = "id1";
  var products  = "id4";
  var technical = "id7";
//  var contactus   = "id14";

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    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', window.parent.document).animate({
          //scrollTop: parent.document.getElementById(products).offsetTop // this works but is a static ref
          scrollTop: parent.document.getElementById(theTarget).offsetTop
        }, 1000);
        return false;
      }
    }
  });
});

</script>
</head>
<body>
  <div style="width: "100%"; height: "0%"">
    <a href="#about" id="about" class="myButton">About</a>
    <a href="#products" id="products" class="myButton">Products</a>
    <a href="#technical" id="technical" class="myButton">Technical</a>
    <a href="#contactus" id="contactus" class="myButton">Contact</a>
  </div>
</body>
</html>

现在，当我点击 link 查看此内容时，它只会加载 iframe 页面，而不是滚动主页面 window。

但是如果我 comment/uncomment 另一个 ScrollTop 行它会工作但显然它只会滚动到父 window.[=11 中的 "id4" div =]

如果不对每个 link 一遍又一遍地使用相同的功能 copy/pasting，我怎样才能使它按照我需要的方式工作？

Answer 1

我建议使用某种字典将 link 哈希值映射到元素 ID：

var map = {
    '#about':     'id1',
    '#products':  'id4',
    '#technical': 'id7',
    '#contactus': 'id14',
};

这样您就可以使用 target 作为该地图的键：

if (target.length && target in map) {
    $('html, body', window.parent.document).animate({
        scrollTop: parent.document.getElementById(map[target]).offsetTop,
    }, 1000);
    return false;
}

Answer 2

太棒了，起初它并没有很好地工作，但这是我用来使它按预期完全工作的代码：

<script type="text/javascript">
var map = {
    'about':     'id1',
    'products':  'id4',
    'technical': 'id7',
    'contactus': 'id11',
};

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);

      if (target.length) {
        $('html, body', window.parent.document).animate({
          scrollTop: parent.document.getElementById(map[this.hash.slice(1)]).offsetTop
        }, 1000);
        return false;
      }
    }
  });
});
</script>

iWeb iFrame 和平滑滚动问题

iWeb iFrames and smooth scrolling issues

javascript

iframe

jquery

parent

smooth-scrolling