Question

我搜索了这个网站，但我找到的只是jQuery滚动到顶部。如何滚动到bottom中的某个链接或书签？

e.g。如果我单击一个按钮：<a href="page.php?#contact_us">Contact Us</a>那么它应该向下滚动页面以使用jQuery书签：<a name="contact_us"></a>。我怎么能这样做呢？

Answer 1

你也可以尝试这个代码：

function scrollToAnchor(aid){
   var aTag = $("a[name='"+ aid +"']");
   $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$(".link").on('click', function() {
   scrollToAnchor(this.id);
});

Fiddle in action

此处.link是锚标记的类名，id1, id2, id3..and so on是每个锚的id，您必须在锚链接上绑定click事件并在名为{的函数中传递id {1}}其中scrollToAnchor(aid){...}是从绑定事件传递的id的参数。

Answer 2

尝试jQuery animateScroll（http://plugins.compzets.com/animatescroll/），这个插件会为你添加smoth css3效果。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="animatescroll.js">
    </head>
    <body>
        <div id="section-1">This is the element where you want to scroll to<div>

        // You may call the function like this
        <a onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>
    </body>
</html>

Answer 3

这个怎么样

Fiddle Link

<script type="text/javascript">
$( document ).ready(function() {

    function scrollToByName(element) {
        // read target name, remove hash-tag
        var aTargetName = element.attr('href').split("#");
        var sTargetName = aTargetName[aTargetName.length-1];
        var jqTarget = $("a[name=" + sTargetName + "]");
        var sSpeed = "slow";

        // check if element exists
        if (jqTarget.length > 0) {
            // animate view to the target
            $('html,body').animate({scrollTop: jqTarget.offset().top}, sSpeed);
        }
    }

    $('.scroll-trigger').on('click', function (event) {
        // prevent default 'jump'
        event.preventDefault();
        scrollToByName($(this));
        return false;
    });
});
</script>

使用html

触发器

<a href="page.php?#contact_us" class="scroll-trigger">Take me there.</a>

和目标

<a name="contact_us" href="#">Contact us</a>

希望它适合你。

jQuery Scroll Bottom

3 个答案: