Question

JQuery中的平滑滚动效果在IE＆amp; Mozila浏览器，它在Chrome浏览器中很好用，可以为此提供任何帮助。我使用这个代码。有时在莫兹拉工作，但在IE浏览器。请忽略stickit（）函数。在此先感谢。

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

Answer 1

解决方案是在JQ中同时使用html和body - ＆gt; $('html,body').animate

见下文（我删除了rolllspy代码，因为它与此问题无关，但你应该保留它）

$(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>
							 
<div id ="section1">

</div>
<div id ="section2">

</div>
<div id ="section3">

</div>

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

1 个答案: