2

有人可以告诉我如何滚动内容。例如我有一个这样的链接

<a href="#">content3</a>

当用户单击该链接时，我想将内容滚动到div content3.

有人可以告诉我如何使用 jQuery 做到这一点吗？

这是我的完整代码。

<div class="container">
<div class="nav">
    <ul>
        <li><a class="active" href="#">content1</a></li>
        <li><a href="#">content2</a></li>
        <li><a href="#">content3</a></li>
        <li><a href="#">content4</a></li>
    </ul>
</div>
<div id="content">
<div id="content1" class="content1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content2" class="content2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content3" class="content3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content4" class="content4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
4

8 回答 8

3

您不需要 jQuery 来执行此操作 - 只需使用“content3”href="#content3"滚动到元素。id

于 2013-01-23T20:58:06.560 回答
0

jQuery 有 scrollTop 和 scrollLeft 方法来做到这一点。如果它只是垂直滚动，那么 scrollTop(yVal) 就可以了

http://api.jquery.com/scrollTop/

于 2013-01-23T21:00:27.517 回答
0

使用滚动顶部：

例子 ：

<a scrollTo="content3" href="#">click me to scroll to the div "content3"</a>

$(document).ready(function(){
    $('a').on('click',function(){
        $("#container").animate({ scrollTop: $('#'+$(this).attr('scrollTo')).offset().top }, 1000);
    });
});
于 2013-01-23T21:00:43.417 回答
0

不知道你想做什么，但去看看wowslider.com

于 2013-01-23T21:01:35.820 回答
0

像这样使用 $('body').scrollTop 属性：

$('#button1').click(function(){
    var element = $('#content1'),
    elemTop = element.offset().top, // You get the element top to know where to move the window
    windowTop = elemTop + 20; // You can add some pixels so the element dont be shown on the very edge
    $("html, body").animate({
           scrollTop:  windowTop // Animate the change so it doesnt seem invasive
    }, "fast");
    }
});
于 2013-01-23T21:06:14.313 回答
0

试试这个...

$('a').on('click', function (){
    $('html,body').animate({
        scrollTop: $('#'+$(this).text()).offset().top},
    'slow');
});

请参阅此JsFiddle 示例

问候...

于 2013-01-23T21:07:22.177 回答
0

根据您的标记，您似乎想使用锚文本来确定滚动的位置。如果您单击该content1链接，它将滚动到<div id="content1">。

$('.nav ul li a').click(function(){

    $('html, body').animate({
        scrollTop: $('#' + $(this).text()).offset().top
    }, 2000);

});

以小提琴为例：http: //jsfiddle.net/ZG3zh/

于 2013-01-23T21:08:29.023 回答
0

为了使用 HTML 滚动，您需要设置滚动到href的锚点#+'id of element'。

示例：我想滚动到<div id="scrollHere">Hello World</div> 使用anchor标签或a使用代码，<a href="#scrollHere">Click Me!</a>

于 2013-01-23T21:13:27.277 回答