Question

我在CSS中添加了过渡自适应功能。当用户点击容器3中的菜单时，容器2中的文章显示，当它显示时，它会平滑地上下移动。目前，除了过渡之外，其他标签完全正常。我应该修复哪一部分？

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 70%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    float:right;
    padding-right: 15px;
}
  
#container3{
    width: 25%;
    height: 99%;
    border: 1px solid black;
    overflow: auto;
    float: left;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow: hidden;
}

 /*responsive image*/
img {
    width: 100%;
    height: auto;
}
.panel{
    width:100%;
    height:100%;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.9s ease-in-out;
    transition: transform 0.9s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;  
}

a[ id= "one" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "two" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}

a[ id= "commerce" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}

<div id="container1">
    <div id="row">
        <div id="container3">

            <nav>
                <ul>
                    <li><a href="#commerce">Commerce</a></li>
                    <li><a href="#one"> 1 </a> </li>
                    <li><a href="#two"> 2 </a> </li>
                    <li><a href="#two"> 2 </a> </li>
                    <li><a href="#two"> 2 </a> </li>
                </ul>
            </nav>
        </div>
    </div>
       
    <div id="container2">

        <article class="panel" id="one">
            <h1> A bit of text here</h1>
        </article>

        <article class="panel" id="two">
            <h1> More here :-)</h1>
        </article>

        <article class="panel" id="commerce"><img src = "http://plusquotes.com/images/quotes-img/roundflower.jpg" alt="breakfast"></article>
   
    </div>
</div>

Answer 1

您无法使用 CSS 创建滚动动画。

在您的示例中，动画仅使用 HTML锚点完成。

但你可以使用cmd.exe "/K mode con:cols=**500** lines=9999&cmd.exe"。

示例

JavaScript/JQuery

function scrollToAnchor(id){ var element = $("#"+id); $('html,body').animate({scrollTop: element.offset().top},'slow'); }

.content{ width:100%; height:800px; background-color:#ddd; border:solid 1px #555; }

Answer 2

我还没有发表评论，但我想提高 Alexis 的答案。

jQuery( document ).on( 'click', 'a[href^="#"]', function( e ) {
    var _this = jQuery( this ), _target = jQuery( _this.attr( 'href' ) );

    if ( _target.length ) {
         e.preventDefault();

         var offset = _target.offset().top - (parseInt( _this.data( 'offset' ) ) || 100), v_offset = jQuery( document ).height() - jQuery( window ).height() - 100, speed = Math.abs( jQuery( window ).scrollTop() - offset );

         jQuery( 'html, body' ).animate( {
             scrollTop : offset <= v_offset ? offset : v_offset
        }, (Math.log( Math.pow( speed / 1000, .5 ) ) + 1) * 1000 );
    }
} );

通过在click事件中使用它，所有使用＃的锚标签都将使用animate功能。通过这种方式，您不必在每个链接上使用onclick :)

<a href="#example" offset="300">Testing</a>

您可以为每个内部链接使用不同的偏移。如上面的代码中所使用的，标准偏移量是100px。

CSS过渡轻松进入不起作用

2 个答案: