jQuery動畫滾動

-2

我在jQuery中有動畫滾動問題。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); 
     } 
    });    
})

有誰知道我能做些什麼？

來源

2015-11-18 SURViR

-4

什麼是if（target.length）{意思是說，你已經知道元素存在，並且href也存在，就像在jquery選擇器中一樣，你需要href的第一個字符是＃。

這應該工作：我改變你的.length線爲> 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); 
     } 
    }); 
});

來源

2015-11-18 17:52:37

錯了無論哪種方式:) – sirrocco

它檢查是否該元素存在，這是一個相當著名的檢查，如果什麼東西在DOM存在 –

的方法@馬修考利 - 查找「Javascript的真相」（因爲我的第一個評論根本沒有幫助） – sirrocco

邏輯正確。不過，我相信實施可能會有一些問題。你基本上想滾動到id等於href的a的元素。在以下示例中，div的定義爲id = "div"以及href="#div"的錨標記。此外，$(this.href)會給你完整的URL，所以你必須使用$(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/

來源

2015-11-18 18:00:29 DinoMyte

但在你的例子中，動畫不會影響:(我知道這段代碼是如何工作的，而且我實現它是正確的，我只是在動畫時遇到問題，它（ – SURViR

）如果你一直向下滾動到'Click'，它會滾動到div，你可能需要將持續時間從1000更改爲4000或更多 – DinoMyte

在我的瀏覽器中，它沒有't（firefox） – SURViR

所以，如果你想動畫滾動嘗試下面的代碼獲取目標。設置你想要動畫滾動的類。在這種情況下，我只有一個底層的.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>

來源

2015-11-18 18:30:10

jQuery動畫滾動

回答

相關問題