CSS 데이터 - 앵커로 전환

Question

가로 페이지 레이아웃의 앵커에 대해 데이터 전환 옵션을 사용하려고했지만 실패했습니다. 앵커 링크를 선택했을 때 멋진 슬라이드 효과를주기 위해 노력하고 있습니다. 페이지의 레이아웃은 수평입니다. 전환을 앵커가 아닌 페이지에만 사용할 수 있습니까? 또한 텍스트가 뷰포트보다 길면 이전 링크/앵커에서 이전에 사용자가 있던 위치와 관계없이 앵커 링크가 앵커의 맨 위로 이동할 수 있습니까?

여기 여기 HTML을

<div id="header"> 
    <ul id="menu"> 
     <li><a class="anchor" href="#box1" data-transition="slide">Home</a> 
     </li> 
     <li><a class="anchor" href="#box2" data-transition="slide">About Us </a> 
     </li> 
    </ul> 
    <div id="wrap"> 
     <div id="box1"><a name="box1"></a> 
      <div class="contentcontainer"> 
        <div class="contentccrightcontainer"> 

         <h1 class="blue">Home</h1> litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo. 


<h1 class="blue">Home</h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet est justo. Maecenas eget cursus sapien. Fusce in nisi elementum, rhoncus odio quis, placerat velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo. 

       </div> 
       </div> 
      </div> 

     <!--- Section 2 --> 

    <div id="box2"><a name="box2"></a> 
      <div class="contentcontainer"> 
        <div class="contentccrightcontainer"> 

         <h1 class="blue">About Us</h1> litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo. 


<h1 class="blue">About Us</h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet est justo. Maecenas eget cursus sapien. Fusce in nisi elementum, rhoncus odio quis, placerat velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo. 

       </div> 
       </div> 
      </div>  
    </div> 

있어 같은 페이지에서 CSS

.contentcontainer { 
    -moz-box-shadow: 1px 1px 15px 1px #000; 
    box-shadow: 1px 1px 15px 1px #000; 
    overflow: auto; 
    margin: 0 auto; 
    position: relative; 
    background-color: rgba(255, 255, 255, 0.8); 
    width: 940px; 
    padding-bottom: 25px; 
    padding-left: 30px; 
    top: 65px 
} 
.contentccleft { 
    padding-top: 35px; 
    float: left; 
    position:relative; 
    margin-left:15px; 
    width: 425px; 
} 
.contentccright { 
    margin-left: 20px; 
    padding-top: 35px; 
    width: 350px; 
    float: left; 
    position: relative; 
    padding-left: 5px; 
} 
.contentccrightcontainer { 
    position: relative; 
    width: 840px; 
    background:#eaeaea; 
    border-radius: 5px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 20px; 
    overflow:auto; 
} 
#header { 
    width: 100%; 
    background-color: #000; 
    z-index: 2000; 
    height: 55px; 
    position:fixed; 
    margin: 0 0; 
} 
#menu { 
    width: 940px; 
    margin: 0 auto; 
} 
ul li { 
    list-style: none; 
    height: 50px; 
    float:left; 
    padding:0 0; 
} 
ul li a { 
    font-family: font3; 
    width: 134px; 
    height: 50px; 
    line-height: 53px; 
    border-bottom: 6px solid #636393; 
    color: #fff; 
    font-size:13px; 
    text-transform: uppercase; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 
li:nth-child(1) a { 
    border-color: #fff; 
} 
li:nth-child(2) a { 
    border-color: #FF6; 
} 

li:nth-child(1) a:hover, li:nth-child(1) a.active { 
    color: #000; 
    border-bottom: 55px solid #fff; 
    height: 1px; 
} 
li:nth-child(2) a:hover, li:nth-child(2) a.active { 
    color: #000; 
    border-bottom: 55px solid #ff6; 
    height: 1px; 
} 

#wrap { 
    min-height: 100%; 
    width:200%; 
    overflow:hidden; 
    background: #ff0000; 
} 

#box1, #box2, { 
    width:50%; 
    float:left; 
    color: #000; 
} 

Answer 1

전환있어, 기본적으로 무시됩니다. 위의 링크에서 http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

:
현재 활성 페이지에 같은 페이지 전환을
전환 사용은 기본적으로 무시되지만 $ .mobile.changePage 방법의 allowSamePageTransition 옵션을 사용하여 활성화 할 수 있습니다. 모든 전환이 예상대로 작동하는 것은 아니며 비실용적 인 결과로 끝날 수도 있습니다.