Question

我试图将平滑滚动放入我的Bootstrap 3.它平滑滚动，但它总是滚动到顶部，然后跳转到给定的hush标签部分。有人可以帮我解决这个问题吗？

jQuery的：

$(".mylink").on('click', function(e) {
   e.preventDefault();
    var to = $(this).attr('href');
    $('.scrollspydiv').animate({
        scrollTop: $(to).offset().top },3000,
        function(){
            window.location.hash = to;
        })

});

Hush link：

<ul id="collapseTwo" class="list-group panel-collapse collapse in">
    <li class="list-group-item"><a class="mylink" href='#register'>register</a></li>
    <li class="list-group-item"><a class="mylink" href='#cancel'>cancel</a></li>
    <li class="list-group-item"><a class="mylink" href='#find'>find</a></li>
    <li class="list-group-item"><a class="mylink" href='#location'>location</a></li>
    <li class="list-group-item"><a class="mylink" href='#kids'>kids</a></li>
    <li class="list-group-item"><a class="mylink" href='#teen'>teen</a></li>
    <li class="list-group-item"><a class="mylink" href='#question'>question</a></li>
</ul>

内容：

<div data-spy="scroll" data-target="#navlist"  data-offset="50" class="scrollspydiv" >
    <h3 id="register">register</h3>
    <p>content</p>
    <h3 id="cancel">cancel</h3>
    <p>content</p>
    <h3 id="find">find</h3>
    <p>content</p>
    <h3 id="location">location</h3>
    <p>content</p>
    <h3 id="kids">kids</h3>
    <p>content</p>
    <h3 id="teen">teen</h3>
    <p>content</p>
    <h3 id="question">question</h3>
    <p>content</p>   
</div>

CSS：

.scrollspydiv {height: 500px;overflow: auto;}
.scrollspydiv h3 { text-decoration: underline; }

Answer 1

由于div元素中的可滚动项目，会发生此问题。所以会涉及某种计算，更详细的信息将在下面的网址中。

http://kadaj.github.io/tuts/smooth-scroll/smooth-scroll.html

Bootstrap 3平滑滚动向上滚动然后跳转到选择

1 个答案: