点击切换按钮时向下移动窗口视点

Move windows viewpoint down when clicking on toggle

本文关键字：移动 窗口 视点 按钮      更新时间：2023-09-26

单击more按钮时，将显示其余文本。对于较小的屏幕，我们需要向下滚动以阅读所有文本。当点击更多的切换时，是否有办法将视点向下移动几个像素?我希望点击更多后，它能滑到文章的标题。我在文章包装的顶部有边距，不想删除它。

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();
    showChar = content.search(/<!'-'-'s*break's*'-'->/);
    if (content.length > showChar && showChar != -1) {
      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);
      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
      $(this).html(html);
    }
  });
  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});
#first article {
	color: #FFFFFF;
	background-color: rgba(14, 0, 0, 0.3);
	width: 860px;;
	float: right; 
	margin-bottom: 95px;
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-top: 20px;
}
nav#menu {
	position: fixed;
	z-index: 5;
	width: 100%;
	top:0%;
	text-align: center;
	height: 90px;
	box-shadow: 0 0 25px rgba(0,0,0,0.9);
	background-color: rgba(14, 0, 0, 0.8);
}
nav#menu a {
	text-decoration: none;
	text-indent: -9999px;
	 color: #fff;
}
nav#menu li {
	display:block;
	font-size: 1.2em;
	padding: 1em;
	font-weight: 900;
	font-family: 'Sorts Mill Goudy', serif;
	text-align: center;
	height: 3em;
	display:table-cell;
	vertical-align: middle;
	/*border: solid 1px #fff;*/
	}
nav#menu ul {
	display: inline-block;
	height: 85px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li><a class="first" href="#f">Home1</a></li>
<li><a class="first" href="#f">Home2</a></li>
 </ul>
</nav>
<section id="first" class="story" data-speed="4" data-type="background"  >    	
<div id="wrapper">
<article>
      
<div class="comment more">
	<h2>Header</h2>
Son had talks with at least one lender before scrapping the plan at least three months ago when he could not agree with the overseas partner on financing conditions, the people said, asking not to be identified because they are not authorized to discuss the matter.  <!-- break -->
  
While it was the top possible deal earlier this year, Son is no longer considering using that partner, the people said without elaborating.
Concerns about debt and struggling U.S. unit Sprint Corp. have driven SoftBank’s market value down to about $64 billion, or less than the stakes it holds in companies including Alibaba Group Holding Ltd. and Yahoo Japan Corp. A deal excluding Son’s 19.3 percent stake would be the biggest management buyout ever, according to data compiled by Bloomberg.
</div>
  
</article>
 </div>
</section>

你可以使用scrollTop方法使用jQuery滚动。

// Example : Scroll the window at 450px from the top
$(window).scrollTop(450);

您可以在切换按钮的代码之后添加这一行(就在$(this).prev().toggle();之后)。如果你改变了你的css或布局，你可能需要为scrollTop使用一个不同的值。

如果你想滚动只有当你点击more(而不是less)，你可以添加代码后，$(this).html(moretext);

相关文章：