Question

我有以下jquery函数，根据所选的div显示/隐藏内容......

jQuery(document).ready(function() {
  jQuery('.showSingle').on('click', function () {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    jQuery('.targetDiv').hide();
    var selector = '#div' + jQuery(this).data('target');
    jQuery(selector).show();
    location.hash = selector;
  });
});

http://jsfiddle.net/W4Km8/7944/

我还从http://1stwebmagazine.com/jquery-scroll-to-anchor-point

获取了以下脚本

$(document).ready(function(){
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-40
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

我正在尝试将2组合起来，而不是跳到锚点，而是滚动到它。我需要将它们组合起来还是可以分开工作？

Answer 1

看起来你可以很容易地将它们组合起来，我已经使用了这个jsfiddle：http://jsfiddle.net/9soxbhpj/

var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
        'scrollTop': target.offset().top-40
    }, 900, 'swing', function () {
        window.location.hash = selector;
    });

Answer 2

您可以在同一次点击通话中添加滚动操作。见js：

jQuery(document).ready(function() {

  jQuery('.showSingle').on('click', function () {
    var _el = jQuery(this),
        _target =  jQuery('#div' + _el.data('target')),
        _targetDiv = jQuery('.targetDiv');

    _el.addClass('selected').siblings().removeClass('selected');
    _targetDiv.hide();
    _target.show();

    // Scroll to object
    $('html, body').animate({
        scrollTop: _target.offset().top
    }, 800);

  });

});

这是working example。

jQuery结合了2个脚本来实现平滑滚动以锚定

2 个答案: