jquery animate.scrollTop（）不工作在MDDL鏈接

嗨，大家好我想與谷歌mdl做一個網站模板，但問題是滾動頁面到相應的部分點擊菜單鏈接的代碼不是加工。jquery animate.scrollTop（）不工作在MDDL鏈接

看到代碼的幫助：

// handle links with @href started with '#' only 
 
$(document).on('click', 'a[href^="#"]', function(e) { 
 
    // target element id 
 
    var id = $(this).attr('href'); 
 

 
    // target element 
 
    var $id = $(id); 
 
    if ($id.length === 0) { 
 
     return; 
 
    } 
 

 
    // prevent standard hash navigation (avoid blinking in IE) 
 
    e.preventDefault(); 
 

 
    // top position relative to the document 
 
    var pos = $(id).offset().top - 10; 
 

 
    // animated top scrolling 
 
    $('body, html').animate({scrollTop: pos}); 
 
});

.Home-section { 
 
    height:500px; 
 
    background: deepskyblue; 
 
    width:100%; 
 
    } 
 

 
.About-section { 
 
    height:300px; 
 
    background:deeppink; 
 
    width=100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<head> 
 
    
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <link rel="stylesheet" href="js/lightbox2-master/src/css/lightbox.css"> 
 
    <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css"> 
 
    <link rel="stylesheet" href="js/animate.css"> 
 
    <link rel="stylesheet" href="main.css"> 
 
    
 
</head> 
 

 
<body> 
 
    <div class="mdl-layout mdl-js-layout"> 
 
<div class="mdl-layout__content"> 
 
    <a href="#home" class="mdl-navigation__link">Home</a> 
 
    <a href="#about" class="mdl-navigation__link">About</a> 
 
     
 
    <div class="Home-section" id="home"></div> 
 
    <div class="About-section" id="about"></div> 
 
    
 
    
 
    </div> 
 
    </div> 
 
</body>

所以，如果你知道拒絕解決這個，請讓我知道。

任何可以使用mdl的插件也可以爲我完成這項工作。

在此先感謝

來源

2016-05-06 pulkit

如果它不滾動在谷歌MDL，有可能，你是不是滾動的html或body。查看這個帖子了更多的細節：Material Design Lite and jQuery, smooth scroll not working

所以這段代碼：

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

應該是這樣的：

$（ 'MDL-佈局'）動畫（{scrollTop的：pos}）;

我知道這是一個後期，但無論如何。

來源

2016-10-12 22:12:07

我找到了答案。這不是完美的，但它的工作原理。

代替

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

使用

$(".mdl-layout__content").animate({scrollTop: pos});

來源

2016-11-05 18:43:18

您沒有看到任何事情發生的原因是因爲你身體節點上滾動。 MDL處理mdl-layout__content中的溢出，這是您應該滾動的元素。

所以：

$("html, body").animate({scrollTop:position}, speed, "swing");

現在變成了：

$(".mdl-layout__content").stop().animate({scrollTop:position}, speed, "swing");

來源

2017-09-15 15:47:19

jquery animate.scrollTop（）不工作在MDDL鏈接

回答

相關問題