Как мне объединить этот код?(Читать дальше, читать меньше с помощью Scroll To Top)

Question

У меня есть несколько абзацев, отображаемых в заголовке моей страницы.Я не хочу, чтобы весь текст отображался, поэтому у меня есть кнопка «читать больше» и «меньше читать».В настоящее время, когда нажимается кнопка «Читай меньше», страница остается в середине.Я бы хотел, чтобы при нажатии кнопки «меньше читал» она также прокручивалась вверх.Я нашел эти два кода, и оба дают мне желаемую функцию отдельно.Я хотел бы объединить код, но я не уверен, как, поскольку я все еще изучаю 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>

Answer 1

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";
    smoothScroll(document.getElementById('about'));
  } 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);
}

.about{
    font-size:16px;
    font-weight:599;
    width:65%;
    float:right;
    margin:55px 40px 70px 0;
    display:block;
}
#more{
    display:none;
}
#myBtn{
    outline:0; 
    border:1px solid #000;
    background:#fff;
    color:#4f9190;
    font-family: bonvenocf-light;
    font-size:12px;
    font-weight: bold;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:40px;
    vertical-align:top;
    width: 50%;
    border-radius: 0px;
    display:block;
    margin:-10px auto 0;
    padding:0 5px 0 20px;
}

<div class="about" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
<span id="dots"></span>

<span id="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
</span>
<button onclick="myFunction()" id="myBtn">Read More</button>
</div>

Answer 2

Функция прокрутки назад к вершине выполняется, когда вы нажимаете кнопку здесь:

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>

Часть onclick запускает функцию smothScroll() в коде JavaScript.

Теперь часть Read Less выполняется в myFunction() в условии if.Если вы добавите smoothScroll() внизу условия if, оно должно работать так, как вы хотите:

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
    smoothScroll(document.getElementById('second')); // <-- here
}

Теперь, когда вы знаете, как достичь того, чего хотите, я бы посоветовал вам очиститьКод немного и попытаться понять, как все работает.Вы также можете узнать о современном JavaScript и т. Д. Это было бы хорошим упражнением для улучшения ваших знаний JavaScript.