Question

当我点击指向元素ID的链接时，我希望它能够设置动画，就像第一个ID淡出和滚动的新ID逐渐淡入。

OR

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

如果有人能提供帮助，我们将不胜感激，谢谢！

此外，如果有一个更简单的解决方案，让中间的内容没有滚动条，所以每个部分加载速度更快但保持在中间，我很乐意知道。我对这一切都很陌生，这让人很困惑。我还没有找到关于JavaScript的线索。

谢谢。

CSS：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="recallCtrl">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tr ng-repeat="(key, value) in dcList">
            <td>
                <input ng-model="key" ng-blur="createNewKey(key)"/>
            </td>
            <td>
                <input ng-model="dcList[key]"/>
            </td>
        </tr>
    </table>

    <pre>{{dcList | json}}</pre>
  </div>

HTML：

* {
    margin:0;
    padding:0;
    text-decoration:none;
    box-sizing:border-box;
    font-family:tahoma;
    overflow:hidden;
}

body {
    background: url(http://www.visionpharmacy.org.uk/assets/img/main/22.jpg) no-repeat;
    height:100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.wrapper {
    width:960px;
    max-width:100%;
    margin:0 auto;
    position:relative;
    height:100vh;
    z-index:1;
}

.wrapper > #welcome, #contact {
    background:rgba(250,250,250,0.8);
    padding:40px;
    margin-top:15vh;
    height:80vh;
}

header {
    position:fixed;
    width:100%;
    max-width:100%;
    height:10vh;
    background:white;
    z-index:2;
    }

header > h1 {
    font-family:sans-serif;
    font-size:2em;
    padding:0 0 0 20px;
    line-height:70px;
    font-weight:600;
    color:black;
    float:left;
}

nav {
  float:right;
  line-height:10vh;
  padding:0 20px 0 0;
}

a[name="backtotop"] {
    font-size:1em;
    color:black;
}

a[name="backtotop"]:hover {
    color:lightseagreen;
    transition:0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

JS小提琴：

https://jsfiddle.net/5nwudmhc/

Answer 1

试试这个：

$(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;），当你删除它时，它会工作，但背景也会向上移动，所以在您需要将body添加到background-attachment: fixed;元素的CSS中的body元素，现在问题是由于导航条，页面顶部的内容无法读取，内容仍然存在。但我想你可以自己解决这个问题。我将提供最终摘要：https://jsfiddle.net/64vmo586/

Answer 2

我认为像这样的东西可以动画滚动：

$('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">

如果要更改动画的速度，可以仅更改该数字并更改该功能的结尾。在示例中，我设置为1000毫秒（等于1秒）

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

2 个答案: