jQuery滾動不是動畫

我想讓我的頁面滾動到特定的<section>點擊一個href。我已經能夠使頁面跳轉到我想要的<section>，但它不光滑（這就像我的.animate不在jQuery中工作）。jQuery滾動不是動畫

HTML

<li><a href="#about" class="about-link">about us</a></li> 

<section class="about" id="about"> 
    <div class="container"> 
     <h1>about us</h1> 
     <p>text</p> 
    </div> 
</section>

jQuery的

$(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $(".about-link").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 
    }); 
});

提前感謝！

來源

2016-09-21 Nicholas Van Son

你可以用下面的元素id進行動畫製作。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <button class="click">Click Me</button> 
 
\t <div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;"> 
 
\t \t hello anuradh 
 
\t </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $(".click").on('click',function(){ 
 
\t \t \t //window.location = "#mydiv"; 
 

 
\t \t \t $('html, body').animate({ 
 
     \t \t  scrollTop: $("#mydiv").offset().top 
 
    \t \t \t \t }, 2000); 
 
\t \t \t }); 
 
\t }); 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-09-21 03:38:16

我用你的jQuery，它將我移動到'

'上，但它仍然不是動畫，只是瞬間跳轉。此外，我試圖用href而不是按鈕來做到這一點。 –

所以這個滾動順利，所以爲什麼你的一個。你是否正確地給出了'top'的位置。 –

我相信它確實擁有正確的最高價值，因爲它跳到了我應該點擊鏈接的位置，但它仍然沒有順利進行 –

$(document).ready(function() { 
    // Add smooth scrolling to all links 
    $(".about-link").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 
    }); 
});

沒有什麼不對您的代碼。這是我構建的一個jsfiddle展示它。正如你所看到的，它的運作非常完美。

這裏有一些事情要考慮：

確保你確實有jQuery的在您的工作空間。
請確保您有房滾動（我假設你做，你只是發佈了一個片段）

我希望你能設法得到它的工作！

來源

2016-09-21 04:09:05

jQuery滾動不是動畫

回答

相關問題