在jQuery或JavaScript中是否有ScrollBottom等效？

时间：2016-05-18 08:53:07

标签： javascript jquery html css scrolltop

分辨

@Lesley的回答解决了我的问题：

    $('.timeline-wrapper').on('click', function () {
var self = this;
setTimeout(function () {
    divOffset = $(self).offset().top;
    divHeight = $(self).height();
    viewportHeight = $(window).height();

    $('body, html').animate({
        scrollTop : divOffset + divHeight - viewportHeight
    });
}, 1000);

这个项目使用了2个插件：

我已对其进行了修改，以便当div打开时，它将滚动到顶部并在其顶边位于视口顶部时停止。现在我需要它在展开后滚动到底部，然后在它的底边位于视口底部时停止。以下是精简版，但在原始功能方面没有任何影响。只有内容，所以你看到的几乎就是我在网站上使用的所有内容。我尝试的内容在源代码中得到了评论。

* colobox.js实际上包含在timeliner.js中，但我提到它是因为它可以是独立的。

最有可能的关注领域

$('.timeline-wrapper').on('click', function () {
                var self = this;
                setTimeout(function () {
                    xOffset = $(self).offset();
                    $('body, html').animate({
                        scrollTop : xOffset.top
                    });
                }, 910);
        });

段

＆＃13;
＆＃13; 
/* ======= CORE LAYOUT ======= */
body {
	position: relative;
  background-color: #222;
  color: #eeefef;
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
	height: 200vh;
}
.container {
	position: relative;
	top: 0;
	margin-left: calc(50% - 22em);
  width: 44em;
  padding: 10px;
}
.banner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 1;
	background-size: contain;
	background-position: left center;
	height: 190px;
}
h1 {
  color: #f8c73e;
  font-size: 36px;
  font-weight: 900;
	letter-spacing: .2em;
	line-height: 2;
  margin: 0 0 0 -20px;
}
h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 5px 0;
  letter-spacing: .1em;
}
h3 {
  font-size: 1.6em;
  margin: 10px 0 10px 10px;
}
a:link,
a:visited {
  color: #7097af;
  text-decoration: none;
}
a:hover {
  color: #0ff;
}
a img {
  border: none;
}
p {
  margin: 0 0 10px 8px;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.6em;
}
.lead {
  font-size: 2em;
  margin-bottom: 40px;
}
.clear {
  clear: both;
  line-height: 0;
  font-size: 0;
}

/* ============ TIMELINER.JS ============= */
.timeline-container {
	position: relative;
	top: 15em;
  bottom: 0;
  border-left: 5px solid #f8c73e;
  margin-left: calc(50% - 300px);
	margin-top: 5px;
  width: 600px;
}
.timeline-toggle {
  background: #000;
  border-color: #161616;
  border-radius: 4px;
  color: #fc3;
  cursor: pointer;
  float: right;
  font-size: 14px;
  margin-right: 40px;
  padding: 3px 5px;
  white-space: pre-line;
	width: 15%;
}
.timeline-time {
	position: relative;
	display: table-row;
}
.timeline-time span.timeline-milestone {
	background: url(../img/milestone.png) left center no-repeat;
	z-index: 1;
	display: table-cell;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.timeline-time button.time.time {
	font: 500 1.3rem/1.6 "Open Sans";
	text-align: center;
	padding: 0 0 2px 0;
	position: relative;
	z-index: 9;
	background: #f8c73e;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	color: #000;
	display: table-cell;
}

.timeline-time button.time.time:hover,
.timeline-time button.time.time:active,
.timeline-time button.time.time:focus {
	background: #317bb6; 
	color: #DDD; 
	outline: 0 none transparent;	
}	

.timeline-wrapper {
  clear: left;
  float: left;
  margin: 0 0 12px;
  width: 600px;
	
}
.timeline-wrapper h2 {
  background: transparent;
  font-family: "Open Sans";
  cursor: pointer;
  font-size: 2.2em;
  font-weight: 700;
  margin: 0;
  padding: 4px;
	vertical-align: middle;
}
.timeline-wrapper h2 span {
  background: #f8c73e;
  color: #131313;
  letter-spacing: 0.1em;
  line-height: 1.7em;
  padding: 13px 5px 1px;
}
.timeline-series {
	background: rgba(51,51,51,.3);
  clear: left;
  float: left;
  margin: -14px 12px 0 0;
  padding: 14px 4px 4px 0;
  position: relative;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border: 2px ridge rgba(192,192,192,.6);
	border-left: none;
  width: 600px;
}
.timeline-series dt {
  clear: left;
  font-size: 1.6em;
  list-style-type: none;
  line-height: 1.2em;
  margin: 0 0 12px;
  padding: 0 0 0 55px;
  white-space: nowrap;
	cursor: pointer;
}
.timeline-series dt a {
  color: #f8c73e;
  cursor: pointer;
}
.timeline-series dt a .closed {
  color: #999;
  font-size: 1em;
  margin-left: 0;
}
.timeline-series dt a .open {
  color: #f8c73e;
}
.timeline-series dt a:hover {
  color: #317bb6;
}
.timeline-series dd {
  padding-left: 24px;
  width: 100%;
}
.timeline-series dd h3 {
  color: #FFF;
  clear: both;
  float: left;
  font-size: 1.5em;
  margin: 0 15px 15px 0;
  white-space: pre-line;
}
.timeline-event-content {
  display: none;
}
.timeline-event-content p {
  clear: left;
  float: left;
  line-height: 1.5em;
  margin: 6px 0 10px;
	max-width: 500px;
}
.timeline-event-content h4 {
  clear: left;
  float: left;
  font-size: 1.4em;
  font-weight: 400;
  margin: 10px 0 0;
  padding: 0 0 0 20px;
}
.timeline-event-content blockquote {
  border-left: 2px solid #f8c73e;
  clear: left;
  float: left;
  font-size: 1.8em;
  margin-left: 0;
  padding: 0 30px;
  width: 400px;
}
.timeline-event-content blockquote .attribution {
  font-size: 0.7em;
  text-align: right;
}
.timeline-event-content .media {
  float: left;
	clear: both;
  padding: 0 0 12px;
  width: 300px;
}
.timeline-event-content .media img {
	clear: both;
  border: 2px solid #000;
  margin: 0;
}
.timeline-event-content .media p {
  font-size: 1.2em;
	clear: both;
  margin: 0;
  padding: 0;
}
.timeline-event-content .media a:link,
.timeline-event-content .media a:visited {
  color: #f8c73e;
}
.timeline-event-content .media a:hover {
  color: #317bb6;
}
h3 ~ p, .media ~ p {
	padding: 10px;
	background: rgba(51,51,51,.7);
	box-shadow: 8px 8px 6px (234,205,231,1);
	border-radius: 4px;
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999999; overflow:visible;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; }
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(..img/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:visible;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; font-size: 1.3em; width:100%; color:;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#317bb6;}
        #cboxLoadingOverlay{background:url(../img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:hidden; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}
				.CBmodal { font-size: 1.3em; color: #00E1E1; margin: 10px 0;}

/* UI */


input::-moz-focus-inner { border: 0; padding: 0; margin-top:-2px; margin-bottom: -2px; } 

/* Smartphones (landscape and portrait) ----------- */
@media screen and (max-width: 768px) {

    * {
        max-width: 720px;
    }

    body {
        font-size: normal;
    }

    .container {
       padding:10px;
    }

    div.timelineToggle {
       float:none;
    }

    .timelineEvent div.media {
        display:none;
        float:none;
    }

    .timelineMinor dt {
       font-size:1.2em;
       white-space: normal;
    }

    .timelineMinor dd h3 {
       font-size:1em;
       white-space: normal;
    }

    div#timelineContainer {
    }

    .timelineMinor dd {
        margin-left:20px;
        padding-left:0;
        width:100%;
    }

    .timelineEvent .media p {
       font-size:1em;
    }

    dl.timelineMinor {
       float:none;
       max-width:80%;
    }

    .timelineEvent p {
       float:none;
       width:100%;
    }

    .timelineEvent blockquote {
       float:none;
       width:200px;
       font-size:1em;
    }
}
 @media screen and (max-width:700px) {
   .timeline-container { max-width: 100%; }
 }
/* Smartphones (landscape and portrait) ----------- */
@media screen and (max-width: 540px) {

    * {
        max-width: 520px;
    }

    body {
        font-size: normal;
    }

    .container {
       padding:10px;
    }

    div.timelineToggle {
       float:none;
    }

    .timelineEvent div.media {
        display:none;
        float:none;
    }

    .timelineMinor dt {
       font-size:1.2em;
       white-space: pre-line;
    }

    .timelineMinor dd h3 {
       font-size:1em;
       white-space: pre-line;
    }

    div#timelineContainer {
    }

    .timelineMinor dd {
        margin-left:20px;
        padding-left:0;
        width:100%;
    }

    .timelineEvent .media p {
       font-size:1em;
    }

    dl.timelineMinor {
       float:none;
       max-width:80%;
    }

    .timelineEvent p {
       float:none;
       width:100%;
    }

    .timelineEvent blockquote {
       float:none;
       width:200px;
       font-size:1em;
    }
}
 @media screen and (max-width:500px) {
   .timeline-series { width: 100%; }
.bq, .bq span, .timeline-event-content p, .timeline-wrapper { width: 100%; }
 }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

    * {
        max-width: 300px;
    }

}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTL1942-2013</title>
	
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet'>
  <style>
		.modalBox { background: none; color: #eee;}
		a.CBmodal.cboxElement.CBmodal.cboxElement { color: rgba(0,0,255,1); }
		a.CBmodal.cboxElement.CBmodal.cboxElement:hover, a.CBmodal.cboxElement.CBmodal.cboxElement:active { color: rgba(0,128,255,1); }
   
		.timeline-container {	top: 10em; }
    li { font-size: 1rem; }
    #colorbox, #cboxOverlay, #cboxWrapper{ position:fixed; top:0; left:0; z-index:9999; overflow:hidden; } 
    .ext { position: relative; bottom: -9em; height: 25%; border-left: 5px solid #fc3; margin-left: calc(50% - 300px);	margin-top: 5px; width: 0; overflow: hidden; } 
  </style>
</head>
<body>

	<div class="container">
  
  	<div class="banner">
    
    </div>
		
	</div>
		<div id="timeline" class="timeline-container">

			<button class="timeline-toggle"></button>
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">1</button></h2>
				<dl class="timeline-series">
					<dt id="1" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="1EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">2</button></h2>
				<dl class="timeline-series">
					<dt id="2" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="2EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">3</button></h2>
				<dl class="timeline-series">
					<dt id="3" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="3EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">4</button></h2>
				<dl class="timeline-series">
					<dt id="4" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="4EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">5</button></h2>
				<dl class="timeline-series">
					<dt id="5" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="5EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">6</button></h2>
				<dl class="timeline-series">
					<dt id="6" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="6EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->

<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">7</button></h2>
				<dl class="timeline-series">
					<dt id="7" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="7EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->


		<br class="clear">
    
    <div class="timeline-wrapper">
				<h2 class="timeline-time"><button class="time">8</button></h2>
				<dl class="timeline-series">
					<dt id="8" class="timeline-event"><a>Title</a></dt>
					<dd class="timeline-event-content" id="8EX">
						<h3>Date</h3>
						<p>Text</p>
						<br class="clear">
					</dd><!-- /.timeline-event-content -->
				</dl><!-- /.timeline-series -->
			</div><!-- /.timeline-wrapper -->

			<br class="clear">
      <button class="timeline-toggle"></button>
	</div><!-- /#timelineContainer -->

<div class="ext"></div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://technotarek.com/timeliner/js/timeliner.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
	<script>
		$(document).ready(function() {
			$.timeliner({
				oneOpen: true,
				startState: 'flat',
				expandAllText: '+ Show All',
				collapseAllText: '- Hide All'
			});
			// Colorbox Modal
			$(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:685, initialHeight:100, transition:"elastic",speed:750});
				$(".iframe, .cboxIframe").colorbox({iframe:true, width:"90%", height:"100%" ,transition:"elastic",speed:750});

				
		$('a').click(function(e) {
			e.preventDefault();
		});
		$('.timeline-wrapper').on('click', function () {
				var self = this;
				setTimeout(function () {
                    // Tried a couple of ways to make xOffset a negative number.
					xOffset = $(self).offset();
					$('body, html').animate({
						scrollTop : xOffset.top
					});
				}, 910);
		});
});


	</script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

PLUNKER

2 个答案:

答案 0 :(得分：2)

所以你希望timeline-wrapper div的底部位于视口的底部？我认为这样做：

$('.timeline-wrapper').on('click', function () {
    var self = this;
    setTimeout(function () {
        divOffset = $(self).offset().top;
        divHeight = $(self).height();
        viewportHeight = $(window).height();

        $('body, html').animate({
            scrollTop : divOffset + divHeight - viewportHeight
        });
    }, 910);
});

答案 1 :(得分：0)

除了这个jquery

之外，上述答案都不适用于我 
$('#parentdiv, div:nth-last-child(-n)').animate({scrollTop:$("#parentdiv").prop("scrollHeight")}, 'fast');

由此网站提供Scroll to the bottom of a page with jQuery

相关问题
最新问题