Javascript 需要动画到页面上的其他ID，包括JSFIDLE

当我点击一个链接到一个元素ID时，我想让它产生动画效果，就像第一个ID淡出和滚动淡入的新ID一样

或

我想设置滚动到另一个的动画。我已经在这里和其他网站上搜索过了，包括谷歌搜索，但我没有发现任何与我的代码相关的东西。我知道我需要jquery等等，我尝试过的所有东西都不起作用，所以我删除了所有的JS

如果有人能帮忙，我们将不胜感激，谢谢

此外，如果有一个更简单的解决方案，让中间的内容没有滚动条，那么每个部分都会加载得更快，但停留在中间，我很想知道。我对这一切都很陌生，真让人困惑。我对JavaScript还没有太多的了解

多谢各位

CSS:

HTML:

---

我认为类似这样的东西可以为滚动设置动画：

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {

        event.preventDefault();

        var scrollhere = target.offset().top;

        $('html, body').animate({                   
            scrollTop: scrollhere
        }, 1000);
    }
});

然后，您需要具有与要滚动的div ID相同的href，例如：

<a href="#contact">Contact</a>



将滚动到

<div id="contact">



如果要更改动画的速度，可以仅更改该数字和函数的结尾。在本例中，我已设置为1000ms（等于1s）
尝试以下操作：

$(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
    });
});

然后，您应该将
#contact
（或任何
#IDhere
）添加到您希望用户单击的链接中

并将
id=“contact”
（或任何
id=“IDhere”
）添加到要滚动到的元素中

编辑：

好的，不滚动部分是因为溢出是隐藏的（
overflow:hidden；
），当你移除它时，它会工作，但是背景也会向上移动，所以在CSS中的
body
元素中，你需要添加
背景附件：fixed
到
body
元素，现在的问题是页面顶部的内容由于导航栏而不可读，内容仍然存在。但我想你可以自己解决。我将提供最后一个片段：
so。当您单击“联系人”时，是否希望向下滚动到“联系人”部分？或者你想让你的两个部分（主页和联系人）都在同一个位置，只需在它们之间进行简单的更改（比如某种选项卡）？是的，我想让它滚动到联系人部分，并最终与第一个ID位于同一位置。或者，如果这是不可能的，那么像一个标签系统是的！）其中第一个元素将淡出，下一个（联系人）将淡入。这使用JQuery库，但我看到您已经包含了该元素，所以我没有将其添加到我的回答中。谢谢。显示所需的时间正在工作，如果我单击它，它将在0.8秒后显示，但它不会滚动，只是显示。但这是迄今为止最接近的！我当时不在家里的电脑前（我现在刚下班回来），我现在会努力完善我的答案，这是我所需要的。非常感谢卢克！你试过了吗？嘿，谢谢。我试过了，但不幸的是，没有任何效果：(
<div id="contact">

$(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
    });
});