Перемещение окон в точку вниз при нажатии на переключатель

Question

При нажатии на большее значение будет отображаться остальная часть текста. Для меньшего экрана нам нужно прокрутить вниз, чтобы прочитать весь текст. Есть ли способ переместить точку обзора на несколько пикселей при нажатии на большее количество переключений? Я хочу, чтобы он скользнул вниз до заголовка статьи после нажатия на другое. У меня есть марка поверх оболочки статьи и не хочу ее удалять.

$(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 { 
 
\t color: #FFFFFF; 
 
\t background-color: rgba(14, 0, 0, 0.3); 
 
\t width: 860px;; 
 
\t float: right; 
 
\t margin-bottom: 95px; 
 
\t margin-top: 150px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t padding-right: 20px; 
 
\t padding-bottom: 20px; 
 
\t padding-left: 20px; 
 
\t padding-top: 20px; 
 
} 
 

 
nav#menu { 
 
\t position: fixed; 
 
\t z-index: 5; 
 
\t width: 100%; 
 
\t top:0%; 
 
\t text-align: center; 
 
\t height: 90px; 
 
\t box-shadow: 0 0 25px rgba(0,0,0,0.9); 
 
\t background-color: rgba(14, 0, 0, 0.8); 
 
} 
 

 

 
nav#menu a { 
 
\t text-decoration: none; 
 
\t text-indent: -9999px; 
 
\t color: #fff; 
 
} 
 

 
nav#menu li { 
 
\t display:block; 
 
\t font-size: 1.2em; 
 
\t padding: 1em; 
 
\t font-weight: 900; 
 
\t font-family: 'Sorts Mill Goudy', serif; 
 
\t text-align: center; 
 
\t height: 3em; 
 
\t display:table-cell; 
 
\t vertical-align: middle; 
 
\t /*border: solid 1px #fff;*/ 
 
\t } 
 

 
nav#menu ul { 
 
\t display: inline-block; 
 
\t height: 85px; 
 
\t 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" >  \t 
 
<div id="wrapper"> 
 

 
<article> 
 
     
 
<div class="comment more"> 
 
\t <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>

Answer 1

Вы можете прокручивать с JQuery с использованием метода scrollTop.

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

Вы можете добавить эту строку после кода на кнопке переключения (только после того, как $(this).prev().toggle();). Если вы измените свой css или ваш макет, вам может потребоваться использовать другое значение для scrollTop.

Если вы хотите, чтобы просмотреть только при нажатии на more (а не на less), вы можете добавить код только после того, как $(this).html(moretext);