iWeb iFrame 및 부드러운 스크롤 문제

iWeb을 사용 중입니다. (끔찍하지만 긴 이야기를 사용해야합니다.)iWeb 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에로드되어있는 "HTML 위젯"에 대한 내 코드입니다 기본 창을 스크롤하는 대신 iframe 페이지.

하지만 다른 주석 기둥 줄을 주석 처리/주석 처리를 제거하면 작동하지만 분명히 상위 창의 "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 iFrame 및 부드러운 스크롤 문제

답변

관련 문제