平滑滚动到div id jQuery

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

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

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

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

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

毫无进展。

970722 次浏览
小开
最佳答案

你需要动画html, body

演示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插件文件。

< p >参考: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html < / p > < p >溶液: 

<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>之前。

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

如果你正在使用任何其他CMS或HTML，你可以将代码插入在所有页面上加载的部分中，就在结束主体标记</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');
});

你可以在这里找到所有的easings: 备忘单。

小开

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

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

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

这是最简单的。源-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的其他属性

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

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

Linear, swing, easeOutQuad, easeInQuad, easeInOutQuad, easeOutCubic, easeInCubic, easeInOutCubic, easeOutQuart, easeInOutQuart, easeOutQuint, easeInOutQuart, easeOutQuint, easeInOutQuart, easeOutQuint, easeInOutExpo, easeInOutExpo, easeoutsin, easeininine, easeinoutsin, easeOutCirc, easeinirc, easeInOutCirc, easeOutElastic, easeInOutElastic, easeOutBack, easeInBack, easeOutBounce, easeInBounce, easeInOutBounce

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


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

提交答案