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

これを試して...

$('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> 使ってスクロールしたいのですが、anchora<a href="#scrollHere">Click Me!</a>

于 2013-01-23T21:13:27.277 に答える
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

jQuery には、これを行うための scrollTop および scrollLeft メソッドがあります。垂直スクロールのみの場合は、scrollTop(yVal) でうまくいきます。

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

于 2013-01-23T21:00:27.517 に答える
0

scrollTop の使用:

例 ：

<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 に答える