iWeb iFrames和平滑滾動問題

我正在使用iWeb（可怕的，但我必須使用它，長故事）。iWeb iFrames和平滑滾動問題

我已經設法在頁面上獲得一些平滑的滾動鏈接，但我無法滾動到正確的位置。

這裏是我的被裝載到一個iframe（FYI這是菜單）中的「HTML控件」代碼：

<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行它將工作，但顯然它只會滾動到父窗口中的「id4」div。

我怎樣才能得到這個工作方式我需要它沒有複製/粘貼相同的功能反覆每個鏈接？

來源

2016-09-16 Martin Hughes

我建議這類詞典的來的鏈接散列映射元素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; 
}

來源

2016-09-16 10:58:44 Siguza

那是夢幻般的，它起初並不完全工作，但這裏是我已經用來完全按照預期工作的代碼：

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

來源

2016-09-16 11:51:38

iWeb iFrames和平滑滾動問題

回答

相關問題