jQuery滚动到页面的部分
jQuery滚动到页面的部分
提问于 2013-04-14 02:30:36
我正在尝试建立一个新的时髦的一页网站，在那里我滚动到页面上的一个部分。我想把"fixed“头带到内容所在的确切位置。我正在使用Zurb基金会。这是我到目前为止所拥有的(这里找到的一些代码)：
<li><%= link_to "Recent Work", "#", "data-scroll" => "recent" %></li>
$(document).ready(function() {
$("a[data-scroll]").click(function() {
var id = $(this).data("scroll")
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
});
<div id="recent">some content</div>我的问题如上所述。我想把我的固定标题带到页面上这个div所在的确切位置。请给我建议。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-14 02:32:40
如果你需要抵消“滚你自己的”解决方案，那么尝试以下方法：
$("#button").click(function() {
var offset = 20; //Offset of 20px
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top + offset
}, 2000);
});Stack Overflow用户
发布于 2018-10-02 14:01:58
自从这个问题被提出和回答以来，已经有5年多了，事情发生了一些变化。大多数人现在可能会使用像Angular或React这样的Javascript框架，但对于那些不使用的人(像我自己，正在做一些旧的遗留项目)，我在cereallarceny's answer上做了一些修改。
此解决方案允许在任何元素上滚动，而不仅仅是正文，并考虑到在元素上已经进行的任何滚动。
$("#button").click(function() {
// Find the element that you are scrolling (commonly body, but doesn't need to be!)
var scrollingElement = $('#scrollingElement');
// Find the element that you want to scroll to.
var targetElement = $("#targetElement");
// Stop any current animations (prevents a backlog of scroll animations for trigger-happy end-users)
scrollingElement.stop();
// Define the scrolling animation...
scrollingElement.animate({
scrollTop:
// The distance in pixels from the top of the page to the top of the target element.
targetElement.offset().top
// The distance in pixels from the top of the page to the top of the scrolling element.
- scrollingElement.offset().top
// So far, the above two offsets determine how far down the scrolling element the target actually is...
// The distance in pixels the scrolling element has ALREADY been scrolled.
+ scrollingElement.scrollTop()
// SUCCESS! This will now take us to the target element.
// OPTIONAL PART - SCROLLING OFFSET (for prettiness :])
// This will change based on how you set up your page. Here are some examples...
// To allow for a margin above your target...
- parseFloat(targetElement.css("margin-top"))
// To allow for padding from a parent element (in this case the scrolling element)...
- parseFloat(scrollingElement.css("padding-top"))
// If all else fails, you can always specify your own amount (in pixels)...
- 20
},
200); // Duration in milliseconds of the scroll animation
});现场示例
var listItem = $("li")
listItem.on("click", function() {
var scrollingElement = $('#scrollingElement');
var targetElement = $(this.dataset.link);
scrollingElement.stop();
scrollingElement.animate({
scrollTop: targetElement.offset().top -
scrollingElement.offset().top +
scrollingElement.scrollTop() -
parseFloat(targetElement.css("margin-top"))
}, 200);
})html,
body {
background: #FFF;
height: 100%;
margin: 0;
}
li {
cursor: pointer;
list-style: none;
margin: 10px;
}
li:hover {
color: blue;
}
#links {
border: solid 1px black;
float: left;
height: 90%;
margin: 3%;
width: 20%;
}
#scrollingElement {
border: solid 1px black;
float: left;
height: 90%;
margin: 3%;
overflow: auto;
width: 60%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="links">
<ul>
<li data-link="#head1">Heading 1</li>
<li data-link="#head2">Heading 2</li>
<li data-link="#head3">Heading 3</li>
<li data-link="#head4">Heading 4</li>
<li data-link="#head5">Heading 5</li>
</ul>
</div>
<div id="scrollingElement">
<h1 id="head1">Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head2">Heading 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head3">Heading 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head4">Heading 4</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head5">Heading 5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15991356
复制相关文章
相似问题