【发布时间】：2018-11-20 19:48:36
【问题描述】：
我的页面标题上显示了几段。我不希望显示所有文本，所以我有一个阅读更多和阅读更少的按钮。当前，当单击少读按钮时，页面保持在中间。我希望单击“少读”按钮时也可以滚动回顶部。我找到了这两个代码，并且都分别给了我想要的功能。我想合并代码，但我不确定如何，因为我还在学习 JavaScript。
这是编码（提前致谢）：
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}#more{
display: none;
}
#myBtn{
border:1px solid #000 /*none*/;
background:none;
font-family:caviardreams;
font-size: 13px;
text-transform: uppercase;
font-weight:bold;
padding:0 10px 0 10px;
margin:-5px 0 0 5px;
letter-spacing:5px;
}.first{
width:100%;
}
.second {
width: 40%;
}<div class="second" id="second">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read more</button></span>
<span id="more"><span id="less">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read Less</button></span>
</span></span>
</div>【问题讨论】：
标签： javascript scrolltop