简体   繁体   English

HTML javascript平滑滚动

[英]html javascript smooth scroll

How to smooth scroll using JavaScript? 如何使用JavaScript平滑滚动? I want to Smooth Scroll Down To Div Can anyone know how to add smooth scroll in the JavaScript code below 我想向下平滑滚动到Div谁能知道如何在下面的JavaScript代码中添加平滑滚动

 function scroll_to(val) { if(val== "Scroll down to div id") document.getElementById('divid11').scrollIntoView(); } 
 <select onchange="scroll_to(this.value);"> <option>1111111</option> <option>2222222</option> <option >Scroll down to div id</option> <option>4444444</option> <option>5555555</option> <option>6666666</option> </select> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id='divid11'>scroll</div> 

This is in general already answered here . 总体上已经在这里回答 So using JQuerys .animate function in combination of ScrollTop will do the trick for you. 因此,结合使用ScrollTop JQuerys .animate函数将为您解决问题。

For doing this without JQuery you can follow this tutorial. 要在没有JQuery的情况下执行此操作,可以遵循教程。

Use this script in your body for smooth scroll. 在您的身体中使用此脚本可平滑滚动。

<script type="text/javascript">
    $(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').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM