jquery animate.scrollTop() funktioniert nicht in mdl links

Hallo Leute Ich versuche, eine Website-Vorlage mit Google MDL zu machen, aber das Problem ist, dass der Code für das Scrollen der Seite auf den entsprechenden Abschnitt auf einen Link klicken ist nicht Arbeiten.jquery animate.scrollTop() funktioniert nicht in mdl links

Sehen Sie den Code für die Hilfe:

// 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>

Also, wenn Sie ja Lösung dieses Problems wissen, lass es mich wissen.

Jedes Plugin, das mit MDL arbeiten kann, kann auch die Arbeit für mich erledigen.

Vielen Dank im Voraus

Quelle

2016-05-06 pulkit

Wenn es auf Google mdl nicht Scrollen ist, ist es möglich, dass Sie nicht auf html oder body scrollen. Überprüfen Sie diesen Beitrag out für weitere Einzelheiten: Material Design Lite and jQuery, smooth scroll not working

Also dieses Stück Code:

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

Sollte so etwas wie:.

$ ('mdl-Layout') animieren ({scrollTop : pos});

Ich weiß, es ist ein später Beitrag, aber was auch immer.

Quelle

2016-10-12 22:12:07

Ich fand eine Antwort. Es ist nicht perfekt, aber es funktioniert.

statt

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

Verwendung

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

Quelle

2016-11-05 18:43:18

Der Grund, warum Sie nicht alles passieren sehen, ist, weil Sie auf der Körperknoten scrollen. MDL behandelt den Überlauf innerhalb des mdl-Layouts__content, das ist das Element, das Sie scrollen sollten. So

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

Jetzt wird:

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

Quelle

2017-09-15 15:47:19

jquery animate.scrollTop() funktioniert nicht in mdl links

Antwort

Verwandte Themen