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选项来启用。请注意，并非所有的转换都能按预期进行，并且可能以不切实际的结果结束。