Question

我在jQuery中使用动画滚动有问题。

我有一个动画滚动的脚本，但动画对我不起作用。

这是代码：

$(document).ready(function{
    $('a[href^="#"]').on('click', function(event) {
        var target = $(this.href);
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });            
})

有人知道我能做什么吗？

Answer 1

逻辑是正确的。但是，我认为实施可能会有一些问题。您基本上想要滚动到id等于href a的元素。在以下示例中，div使用id = "div"和带有href="#div"的锚标记定义。此外，$(this.href)会为您提供整个网址，因此您可以使用$(this).attr("href");获取目标

<div id="div">Scroll Here</div>
<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>
    <a href="#div">Click</a>

   $('a[href^="#"]').on('click', function(event) { 
        var target = $(this).attr("href"); // gets the id of the div via href attribute
        if(target.length) {
          $('html,body').animate({
           scrollTop: $(target).offset().top
           }, 800);
        }
    });

http://jsfiddle.net/yz6cunjs/1/

Answer 2

因此，如果您想要动画滚动，请尝试下面的代码。设置您想要动画滚动的类。在这种情况下，我只有底部div与一个.bottom类，该按钮将发送到它在函数中设置的任何类。我确定无论如何你都可以实现它。

我希望这有帮助，

function scrollToBottom(){
  var lastElementTop = $('.bottom').position().top;
  var scrollAmount = lastElementTop + 75;

  $('html, body').animate({scrollTop: scrollAmount}, 900);
};

div{
  height: 650px;
  width: 100%;
  background-color: #2A2B2C;
  }

.bottom{
  height: 50px;
  width: 100%;
  background-color:#7C85FF;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h2>Hello, click the button!</h2>
<button onclick="scrollToBottom()">Click me fool!</button>

<div></div>

<div class="bottom">
  This is the bottom
</div>

Answer 3

if（target.length）{意味着什么，你已经知道元素存在，并且href也存在，因为在jquery选择器中你需要href的第一个字符是＃。

这应该有效：我将.length行更改为＆gt; 1只有当它在href中的＃之后才会出现。

$(document).ready(function{
    $('a[href^="#"]').on('click', function(event) {
        var target = $(this.href);
            if( target.length > 1 ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
            }, 1000);
        }
    });
});

jQuery动画滚动

3 个答案: