Question

现在，切换将向下打开内容，但其中一些内容会被视口切断。如何通过推高其上方的内容来使切换中的内容始终适合视口？

$(document).ready(function() {
  $(".content").hide();    
  $(".toggle").on("click", function(e) {   
    $(this).next('.content').slideToggle(200);
  });
});

问题的图像：

enter image description here

修改的

我尝试添加Aleks G建议的代码：

$(document).ready(function(){
  $(".content").hide();
  $(".toggle").on("click", function(e){   
    $(this).next('.content').slideToggle(200, function() {
      if($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
        $(this).parent().scrollTop($(this).position().top - 100);
      }  
    });
  }); 
});

编辑2

新JSFiddle： http://jsfiddle.net/Dar_T/2h2wjp2L/

Answer 1

您需要在slideToggle来电中添加“完整”参数。在其中，只需检查已打开内容的高度，如果它超出视口的内部高度，则将视口滚动到内容的顶部。

这是展示这个想法的jsFiddle。

在该示例中，我的视口是固定的最大高度div。我切换了一大块文字。在完成功能中，我检查文本的高度，如有必要，滚动父div。

以下是相关的javascript：

$(document).ready(function(){
    $('#toggler').on("click", function() {
        $('#content').slideToggle("slow", function() {
            if($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
                $(this).parent().scrollTop($(this).position().top - 10);
            }  
        });
    });
});

注意滚动位置中的额外- 10 - 由于某些原因，在测试时，它总是滚动超过div开头10个像素，所以这是一个脏的黑客滚动到正确的位置。

编辑：我稍微更新了javascript，以便将新打开的div 100px从视口底部定位，而不是将其添加到视口的顶部。您可以使用- 100部分来修改定位。出于某种原因，我不能让jsfiddle保存我创建的内容并给我一个独特的URL - 这里的东西不能正常工作，因此这是我的完整代码。

<强> HTML：

<div class="viewport">
    <button id="toggler">More info</button>
    <img src="http://www.random.org/analysis/randbitmap-rdo-section.png" />
    <div id="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
</div>

<强> CSS：

.viewport {
    max-height: 300px;
    border: solid 1px darkGrey;
    padding: 10px;
    overflow: auto;
}
div#content {
    display: none;
}

<强>使用Javascript：

$(document).ready(function () {
    $('#toggler').on("click", function () {
        $('#content').slideToggle("slow", function () {
            if ($(this).position().top + $(this).height() > $(this).parent().innerHeight()) {
                //$(this).parent().scrollTop($(this).position().top - 10);
                $(this).parent().scrollTop($(this).position().top - $(this).parent().innerHeight() + 100)
            }
        });
    });
});

Answer 2

如果您希望窗口滚动到切换文本，您可以执行以下操作：

$(document).ready(function () {
    $('.toggle').on("click", function () {
        $('.content').slideToggle("slow", function () {
            $(window).scrollTop($(this).offset().top + $(this).height());
        });
    });
});

此代码的作用是将窗口滚动到按钮单击事件中切换文本的底部。

这是 fiddle 。

希望这有帮助。

Answer 3

这是什么意思？ http://jsfiddle.net/2r89M/1/ 用

包装你的HTML

<div class="wrapper">
  <div class="container">
    <p>aaaaaaaa</p><!-- this is the content above -->
    <!-- Your code here -->
  </div>
</div>

然后添加以下css：

.wrapper {
    height: 300px;
    position: relative;
}
.container {
    position: absolute;
    bottom: 0px;
}

Answer 4

你可以自己创造效果。

像这样更改javascript：

$(document).ready(function(){
    $(".box").on("click", '.toggle',  function(){
        $(this).prev('.content').toggleClass('visible');
    });
});

您还需要更新布局。

<div class="box">
    <div class="content">content...</div>
    <div class="toggle">More information</div>

    <div class="content">content...</div>
    <div class="toggle">More information</div>
</div>

CSS应该如下：

.content {
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: all 1s ease;
}

.content.visible {
    max-height: 500px;
}

Fiddle

Answer 5

这可以通过检测打开元素的底部位置轻松实现，如果切换后的打开元素超出视口，那么我们可以找到外部元素的像素数量并将窗口滚动到底部相同的数量。

$('.toggle').on("click", function () {
        var elem = $(this);
        elem.next().slideToggle(500, function () {
            var topp = elem.next().offset().top;
            var heghtp = elem.next().height();
            var bottomp = topp+heghtp;
            var wpos = WH+WS;
            if(bottomp>wpos){
                var toSlideUp = bottomp-wpos;
                var Pos = WS+toSlideUp;
                $('html,body').animate({scrollTop:Pos},500);
            }
        });
    });

我在这里实现了相同的功能，请参阅 jsfiddle

Answer 6

您可以操纵窗口的滚动顶部并为其设置动画，以便将切换的内容向上移动，如下所示：

$(document).ready(function () {
  $('.toggle').on("click", function () {
    $(this).next('.content').slideToggle("slow", function () {
        var offset = $(this).offset().top;
        $("html, body").animate({
            scrollTop: offset
        });
    });
  });
});

旁注：这样做的缺点是必须等到动画完成

Demo

如果您希望两个动画同时发生，您可以使用css转换，如下所示：

CSS：

.content {
  /*existing styles*/
  max-height:1000px; /*large value*/
  -webkit-transition: max-height 1s ease-in-out;
  -ms-transition: max-height 1s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  transition: max-height .5s ease-in-out;
}
.hidden {
  overflow:hidden;
  max-height:0 !important;
}

JS：

$('.toggle').on("click", function () {
  var $content = $(this).next('.content');
  $content.toggleClass("hidden");
  if (!$content.hasClass("hidden")) {
      var offset = $content.offset().top;
      $("html, body").animate({
        scrollTop: offset
      }, 500);
  }
});

Demo

Answer 7

考虑到底部保证金，看起来很干净。

$.fn.notOnScreenHeight = function(){
     var viewportBottom = $(window).scrollTop() + $(window).height();
     var contentBottom = this.offset().top + this.height();

     return contentBottom - viewportBottom;
};

$(document).ready(function () {
    var margin = 100;    
    $('.toggle').on("click", function () {
        $(this).next('.content').slideToggle("slow",function () {
             var notOnScreen = $(this).notOnScreenHeight();            
             if (notOnScreen > 0 ) {
                var scrollTo = $(window).scrollTop() + notOnScreen + margin;
                $("html, body").animate({scrollTop: scrollTo}, 'slow');
            }
        });
    });
});

这是fiddle

切换以向内推送内容而不是向下推送内容

7 个答案: