Question

我正在使用iWeb（可怕，但我必须使用它，长篇故事）。

我设法在页面上获得了一些平滑的滚动链接，但是我无法将其滚动到正确的位置。

以下是我的代码＆＃34; HTML Widget＆＃34;加载到iframe（仅供参考，这是菜单）：

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

现在，当我点击链接时，只会加载iframe页面，而不是滚动主窗口。

但是如果我评论/取消注释其他ScrollTop线它会起作用，但显然它只会滚动到＆＃34; id4＆＃34;父窗口中的div。

如何在不需要为每个链接反复复制/粘贴相同功能的情况下使其按照我需要的方式工作？

Answer 1

我建议使用字典来将链接哈希映射到元素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 iFrames和平滑滚动问题

2 个答案: