Question

我正在尝试复制谷歌图片功能，当用户点击图片时，div会向下滑动，显示图片....

我需要弄清楚的是如何使浏览器向下滑动到单击图像框的行的顶部。

这是一个粗略草稿的链接，正在进行

这是现在的js

$('li').on('click', function(e){
  e.preventDefault();
  var active = $(this).siblings('.active');
  var posTop = ($(this).position()).top;
  if (active.length > 0) {
    var activeTop = (active.position()).top;
    if (activeTop == posTop) {
        $(this).find('.outer').finish().fadeIn('medium', function(){ 
            active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
        });

    } else {
        $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
        $(this).find('.outer').finish().slideToggle();
    }
} else {
    $(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
  return false;
});

因此，当用户点击某个框时，浏览器应自动向下滑动到所单击行的顶部。

我尝试过使用各种插件，比如scrollTo，但似乎需要一个特定的id来滚动...这对我来说很难，因为我使用的是响应式设计所以行的顶部可能会根据方式而改变用户调整浏览器的大小。

任何想法都将不胜感激

Answer 1

在点击处理程序中尝试此操作：

$('body').animate({scrollTop: $(this).offset().top},300);

这将运行动画，将body的scrollTop属性设置为this的顶部位置，该位置应该是您单击的列表元素。

Answer 2

In this example I am appending the div after last element in the row.
**Here is my HTML**

<div class="container">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

**Here is my jQuery**

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function(){
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
    $('.info-bg').remove(); // removing the prviously added div    
    $('.box').removeClass('edge');
    var selectedPos = $(this).index(); // get selected position
    // find wrap element:
    //var containerWidth = container.width();
    //var elementsInRow = Math.floor(containerWidth / 100 );
    var elementsInRow = 4; // use this if container's width is fixed
    var row = Math.floor(selectedPos / elementsInRow)+1;
    var wrapPos = (row * elementsInRow);

    // if selected is on last row, use as wrap the last element:
    var size = elements.length;
    if (wrapPos >= size){wrapPos = size;}
    wrapPos = wrapPos - 1;
    console.log(selectedPos);
    console.log(elementsInRow);
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
    console.log(selectedPos % elementsInRow);
    console.log((selectedPos % elementsInRow) * 110);
    console.log('left: '+pointerPos);
    console.log(size);
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
    pointerPos = $(this).position().left + $(this).width() / 2 - 10;
    // end edit;
    if (wrapPos == oldWrapPos){
        $('.info-pc').css("left", pointerPos+'px');
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    } else {
        oldWrapPos = wrapPos;
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    }
});

$('html').click( function (e) { 
    if ( e.target == this )
        $('.info-bg').slideUp( function() { $(this).remove(); });
});

**Here is my CSS**

.container{
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.info-bg{
    width: 430px;
    height: 70px;
    background-color: red;
    float:left;
    position: relative;
    margin: 5px;
    display: none;
}

.info-cl{
    height: 100%;
}

.info-pc{
    position:absolute;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 0;
    float: right;
    top: -10px;
}

.box{
    width:100px;
    height:170px;
    background-color: grey;
    float:left;
    margin:5px;
    font-size: 40px;
}

.edge{
    background-color:yellow;
}

.selected {
   background-color: red;

}

以下是工作演示：

http://jsfiddle.net/silpa/9wftgt6j/1/

jQuery - Google图片功能滚动到点击无序列表行的顶部

2 个答案: