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链接

回答

相关问题