平滑的滚动效果在Mozila和IE中不起作用？

问题描述：

JQuery中的平滑滚动效果在IE中无效& Mozila浏览器，在Chrome浏览器中的罚款可以在这方面的任何帮助。我使用这个代码。有些时候在莫吉拉工作，但在IE浏览器。请忽略stickit（）函数。在此先感谢。平滑的滚动效果在Mozila和IE中不起作用？

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" > < /script> < 
 
    script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > < /script> < 
 
    script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> < 
 
    script src = "scroll_110.js" > < /script> 
 

 
$(document).ready(function() { 
 
    // Add scrollspy to <body> 
 
    $('a').scrollspy({ 
 
    target: "a", 
 
    offset: 50 
 
    }); 
 

 
    // Add smooth scrolling on all links inside the navbar 
 
    $("a").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 
 
     $('body').animate({ 
 
     scrollTop: $(hash).offset().top 
 
     }, 1200, function() { 
 

 
     // Add hash (#) to URL when done scrolling (default click behavior) 
 
     window.location.hash = hash; 
 
     }); 
 
    } // End if 
 
    }); 
 
}); 
 

 
// Create a clone of the menu, right next to original. 
 
jquery('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide(); 
 

 
scrollIntervalID = setInterval(stickIt, 10); 
 

 

 
function stickIt() { 
 

 
    var orgElementPos = jquery('.original').offset(); 
 
    orgElementTop = orgElementPos.top; 
 

 
    if (jquery(window).scrollTop() >= (orgElementTop)) { 
 
    // scrolled past the original position; now only show the cloned, sticky element. 
 

 
    // Cloned element should always have same left position and width as original element.  
 
    orgElement = jquery('.original'); 
 
    coordsOrgElement = orgElement.offset(); 
 
    leftOrgElement = coordsOrgElement.left; 
 
    widthOrgElement = orgElement.css('width'); 
 
    jquery('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show(); 
 
    jquery('.original').css('visibility', 'hidden'); 
 
    } else { 
 
    // not scrolled past the menu; only show the original menu. 
 
    jquery('.cloned').hide(); 
 
    jquery('.original').css('visibility', 'visible'); 
 
    } 
 
}

#top, 
 
#middle, 
 
#bottom { 
 
    height: 1600px; 
 
    width: 900px; 
 
    background: green; 
 
} 
 

 
.menu { 
 
    background: #fffff; 
 
    color: #333; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    letter-spacing: 1px; 
 
    width: 100%; 
 
}

<div class="menu"> 
 
    <a href="#top">Top</a> 
 
    <a href="scroll_110.html#middle">Middle</a> 
 
    <a href="scroll_110.html#bottom">Bottom</a> 
 
</div> 
 

 
<div id="top"> 
 
    <a href="top"></a>Top</div> 
 
<div id="middle"> 
 
    <a href="middle"></a>Middle</div> 
 
<div id="bottom"> 
 
    <a href="bottom"></a>Bottom</div>

请创建一个包含'HTML'和'CSS'代码的工作片段，并演示您所说的问题。 – Ionut

答

的解决办法是在JQ使用HTML和身体 - >$('html,body').animate

见下文（我删除了scrollspy代码，因为它是不相关的这个问题，但你应该保持它）

$(document).ready(function() { 
 
    // Add scrollspy to <body> 
 

 

 
    // Add smooth scrolling on all links inside the navbar 
 
    $("a").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 
 
     }, 1200, function() { 
 

 
     // Add hash (#) to URL when done scrolling (default click behavior) 
 
     window.location.hash = hash; 
 
     }); 
 
    } // End if 
 
    }); 
 
});

div { 
 
    height: 500px; 
 
    width: 100%; 
 
    background: red; 
 
    border-top: 10px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#section1">Section1</a></li> 
 
    <li><a href="#section2">Section2</a></li> 
 
    <li><a href="#section3">Section3</a></li> 
 
</ul> 
 
\t \t \t \t \t \t \t 
 
<div id ="section1"> 
 

 
</div> 
 
<div id ="section2"> 
 

 
</div> 
 
<div id ="section3"> 
 

 
</div>

谢谢@Mihai，上面的代码不能在IE中工作。 –

@SaiVijay关于你在说什么IE？在我的IE11中一切都很好 –

平滑的滚动效果在Mozila和IE中不起作用？

相关推荐