我一直试图得到一个滚动到div id jquery代码正确工作。基于另一个堆栈溢出问题,我尝试了以下

演示http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

但这并没有起作用。我也试过了

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

毫无进展。


你需要动画html,主体

演示http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

你确定你正在加载jQuery scrollTo插件文件吗?

你可能会在控制台中得到一个object: method not found "scrollTo"错误。

scrollTO方法不是jquery的原生方法。要使用它,你需要包含jquery scroll to插件文件。

裁判: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

溶液: 将此添加到头部部分。

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

以下是我的观点:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

目标:

<h2 id="contact">Contact</h2>

如果你想覆盖页面上的标准href-id导航,而不改变平滑滚动的HTML标记,使用这个(示例):

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

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

以下是我使用的方法:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

这种方法的优点在于,您可以使用无限数量的散列链接和相应的id,而不必为每个散列链接执行新脚本。

如果你使用的是WordPress,将代码插入到主题的footer.php文件中,就在body结束标签</body>之前。

如果您无法访问主题文件,则可以将代码嵌入到post/page编辑器中(必须以文本模式编辑文章)或将加载到所有页面的Text小部件上。

如果您使用的是其他CMS或HTML,则可以将代码插入到所有页面上加载的部分中,该部分位于body结束标记</body>之前。

如果你需要更多的细节,请查看我的快速帖子:jQuery平滑滚动到id

希望这对你有所帮助,如果你有任何问题,请告诉我。


这个脚本是对Vector脚本的改进。我对它做了一点改动。因此,这个脚本适用于带有类页面的每个链接—在其中滚动。

起初不放松:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

为了缓解你将需要Jquery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

把这个添加到脚本中:

'easeOutExpo'

最后

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

你可以在这里找到所有的便利:小抄。


您可以使用以下简单的jQuery代码来实现这一点。

教程,演示和源代码可以从这里找到-使用jQuery平滑滚动到div

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

再举一个例子:

HTML链接:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML锚:

  <div id="featured">My content here</div>

我试了一下,效果很好。

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

这是一个简单的。source -https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

这对我很管用。

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

谢谢。


这段代码对于网络上的任何内部链接都很有用

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

下面是我的解决方案,平滑滚动到div /锚使用jQuery,以防你有一个固定的标题,这样它就不会在它下面滚动。 同样,如果你从其他页面链接它。

只需替换”。Site-header”到包含标题的div。

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});

普通 JS:

如果你使用现代浏览器,可以在纯JS中完成。

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

浏览器支持是一个小问题,但现代浏览器支持它。


我的香草JS和jQuery的解决方案

香草JS:

document
    .querySelector("#myDiv")
    .scrollIntoView({ behavior: "smooth" });

jQuery:

你需要动画html,主体

$("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

CSS:

html {
  scroll-behavior: smooth;
}

滚动行为的其他属性

scroll-behavior: auto|smooth|initial|inherit;

问题是JQuery。最简单的应该是下面的代码。确保包含了JQueryUI。用最新的版本替换{version},当然这里是你可以用于动画的所有方法的列表。2秒的easeOutExpo将给你非常艺术的滚动。

线性, 摆动, easeOutQuad, easeInQuad, easeInOutQuad, easeOutCubic, easeInCubic, easeInOutCubic, easeOutQuart, easeInQuart, easeInOutQuart, easeOutQuart, easeOutQuint, easeInOutQunit, easeOutExpo, easeInExpo, easeInExpo, easeInOutSine, easeInSine, easeInSine, easeOutSine, easeOutSine, easeInCirc, easeInOutCirc, easeInOutCirc, easeOutCirc, easeInElastic, easeInElastic, easeInElastic, easeOutBack, easeInBack, easeInOutBack, easeOutBack, easeOutBounce, easeInOutBounce, easeInOutBounce

<script src="https://code.jquery.com/ui/{version}/jquery-ui.js"></script>

$('html, body').animate({ scrollTop: $("#id").offset().top }, 1000, "easeInExpo");