单击css可以平滑滚动到特定div

时间：2018-06-04 14:05:14

标签： html css html5

我尝试按下按钮，如果您点击它，它会使用css顺利向下滚动到页面上的特定div！ （没有JS或jquery）。 例如：http://jsfiddle.net/YYPKM/3/ 我无法在代码中理解滚动到底是什么？ 我的代码： HTML：

<html>
<head>
<head>
  <ul class="actions">
      <li><a href="#description" class="button" id="cn">Continue</a></li>
  </ul>
        <section id="description">
            <h2 style="font-weight: 700; font-size: 1.5em; margin-top: 2em;">Description</h2>
            <section id="descr">
                    <div class="image desc"><img src="https://cdn.lynda.com/course/439683/439683-636441077028502313-16x9.jpg" width="800" height="550" title="Our company">
                    </div>
                    <div class="desc">
                        <h2>About Company</h2>
                        <p>Sometimes the mouse, but now it was the makeup of chocolate sauce ante powerful protein manufacturing sad sauce through a gateway.</p>
                    </div>
            </section>
        </section>
</html>

我的css：

/* Button */
    .button {
        background: #ffff00;
        color: #000;
        border-radius: 4px;
        border: 0;
        display: inline-block;
        font-weight: 700;
        height: 2.95em;
        line-height: 3em;
        padding: 0 1.5em;
        text-decoration: none;
        text-align: center;
        margin-top: 1em;
    }
#descr {
        display: flex;
        height: 90vh;
    }
        #descr .desc {
            padding: 3.5em 0 1.5em 0;
            padding-left: 2em;
            padding-right: 2em;
            background: #afdeed;
            width: 50%;
        }
        .image.desc img {
            text-align: center;
            box-shadow: 5px 5px 20px;
        }
        .image.desc img {
            animation: move 2s ease-in-out infinite;
            animation-direction: alternate-reverse;
        }
        @-webkit-keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(2.5em);
            }
        }
        .image.desc:hover img {
            animation: rotate 2s ease-in-out infinite;
            animation-direction: alternate-reverse;
        }

        @-webkit-keyframes rotate {
            0% {
                transform: translate(-5em);
            }
            25% {
                transform: rotate(20deg);
            }
            50% {
                transform: translate(5em);
            }
            75% {
                transform: rotate(-20deg);
            }
        }

我希望如果按钮点击它就会顺利滚动到下一个div！

5 个答案:

答案 0 :(得分：1)

.click效果需要 JQuery 。一个简单，流畅的按钮，在同一页面中将您带到两个特定区域，如下所示：

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

答案 1 :(得分：1)

实际上，您的链接代码的CSS中甚至已评论：

/*
 *Scrolling
 */

a[ id= "servicios" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "galeria" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}
a[ id= "contacto" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}

除此之外，panel类具有以下内容：

.panel {
    [...]
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    [...]
}

这使它平稳而不是立即移动。

/* Button */
    .button {
        background: #ffff00;
        color: #000;
        border-radius: 4px;
        border: 0;
        display: inline-block;
        font-weight: 700;
        height: 2.95em;
        line-height: 3em;
        padding: 0 1.5em;
        text-decoration: none;
        text-align: center;
        margin-top: 1em;
    }
    #descr {
        display: flex;
        height: 90vh;
    }
    #descr .desc {
        padding: 3.5em 0 1.5em 0;
        padding-left: 2em;
        padding-right: 2em;
        background: #afdeed;
        width: 50%;
    }
    .image.desc img {
        text-align: center;
        box-shadow: 5px 5px 20px;
    }
    .image.desc img {
        animation: move 2s ease-in-out infinite;
        animation-direction: alternate-reverse;
    }
    @-webkit-keyframes move {
        0% {
            transform: translate(0);
        }
        100% {
            transform: translate(2.5em);
        }
    }
    .image.desc:hover img {
        animation: rotate 2s ease-in-out infinite;
        animation-direction: alternate-reverse;
    }

    @-webkit-keyframes rotate {
        0% {
            transform: translate(-5em);
        }
        25% {
            transform: rotate(20deg);
        }
        50% {
            transform: translate(5em);
        }
        75% {
            transform: rotate(-20deg);
        }
    }
    
/*
 *Scrolling
 */

.panel {
    width: 100%;
    height: 500px;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

a[ id= "descLink" ]:target ~ #description section.panel {
    -webkit-transform: translateY( -100px);
    transform: translateY( -100px );
}
<html>
<head>
</head>
  <a id="descLink"/>
  <ul class="actions">
      <li><a href="#descLink" class="button" id="cn">Continue</a></li>
  </ul>
        <section id="description">
            <h2 style="font-weight: 700; font-size: 1.5em; margin-top: 2em;">Description</h2>
            <section id="descr" class="panel">
                    <div class="image desc"><img src="https://cdn.lynda.com/course/439683/439683-636441077028502313-16x9.jpg" width="800" height="550" title="Our company">
                    </div>
                    <div class="desc">
                        <h2>About Company</h2>
                        <p>Sometimes the mouse, but now it was the makeup of chocolate sauce ante powerful protein manufacturing sad sauce through a gateway.</p>
                    </div>
            </section>
        </section>
</html>

我添加了<a id="descLink"/>，并更改了href以便将其与此相关联，我还将panel类添加到descr部分，以使其正常工作。 /> 然后，您可以调整CSS中的translateY值以查看其呈现方式。

答案 2 :(得分：1)

您可能已经使其工作了，但是对于您来说，这是一个简单的解决方案，正在寻找简单的答案。

html {
  scroll-behavior: smooth;
}

答案 3 :(得分：0)

我全面使用的解决方案。需要jQuery：

(function($) {
    $(document).ready(function() {
        // Bind to body and use event bubbling
        // Much more efficient than binding to all links on the page
        $('body').on('click', 'a', function(event) {
            var href = $(this).attr('href');

            // Default behaviour if the link isn't an anchor-link
            if(!href || href.substring(0, 1) != '#') {
                return true;
            }

            // Try for link to an id attribute
            var target = $(href);

            // If the anchor destination is added as <a name="" - look for this instead
            if(!target.length) {
                target = $('a[name="' + href.replace('#', '') + '"]:first');

                // If still no target, default behaviour
                if(!target.length) {
                    return true;
                }
            }

            event.preventDefault();

            var targetTop = parseInt(target.offset().top),
                currentTop = parseInt($window.scrollTop());

            // Don't lock scrolling if we're already at the anchor
            if(targetTop != currentTop) {
                $('html, body').stop().animate({
                    'scrollTop': Math.max(0, targetTop)
                }, 500);
            }

            return false;
        });
    });
})(jQuery);

如果您使用轮播或标签或其他依赖于ID链接的UI元素，您可能需要修改选择器，例如，我的某个网站将其实现为：

$('body').on('click', 'a:not(.carousel-control)', function(event) {

答案 4 :(得分：0)

事实上，你链接到的演示中的效果不是真正的滚动，它是一种滚动模拟。它有两个主要部分：the :target pseudo-class，它匹配具有与当前URL的哈希部分对应的ID的元素，以及transition属性，可以平滑地动画任何其他CSS属性（在此case，transform）属性。正如拉法隆正确指出的那样，CSS代码的“神奇”部分是

a[ id= "galeria" ]:target ~ #main article.panel {
    transform: translateY( -500px );
}

此CSS选择器选择<article>类里面的<{1}}元素元素panel ID位于#main元素之后在<a>元素被导航到的同一容器中具有id="galleria"属性（即当页面URL以<a>结尾时）。如果满足此条件，则此CSS规则将#galleria元素应用于将此元素移动500px以上的<article>元素。并且因为所有transform元素都设置了.panel，所以此面板的垂直位置不会立即改变，而是0.6秒（首先加速，然后减速，因为易于进入{{3} }）。

但是，您应该记住，这种方法相当骇人，并且有很多局限性。但CSS有timing function - transition: transform 0.6s ease-in-out;（虽然并非所有浏览器都支持它，但它可以为您的项目提供良好的渐进增强功能）。

相关问题
最新问题