Плавная прокрутка к якорю элемента списка и скрытие/открытие блока при нажатии js?

Question

[seegalus]

Есть список представленный в виде сайдбара. Суть вопроса в том, что необходимы два действия. 1) при нажатии на одном из элементов списка необходимо отобразить блок с фотографиями. 2) при нажатии на один из элементов списка - добавить плавную прокрутку к якорю. По отдельности работает все корректно, когда все вместе страдает плавная прокрутка. Бьюсь второй день, буду вам очень благодарен за помощь!

<ul class="portfolio_list">
<li><a href="#portrait" class="portfolio_list_elem">PORTRAIT</a></li>
<li><a href="#street" class="portfolio_list_elem">STREET</a></li>
<li><a href="#love_story" class="portfolio_list_elem">LOVE STORY</a></li>
<li><a href="#wedding" class="portfolio_list_elem">WEDDING</a></li>
</ul>

<div id="portrait" class="portfolio_block">
<img src="../images/portfolio/img/portrait/photo_portrait_1.jpg" alt="photo">
<img src="../images/portfolio/img/portrait/photo_portrait_2.jpg" alt="photo">
<img src="../images/portfolio/img/portrait/photo_portrait_3.jpg" alt="photo">
</div>

<div id="street" class="portfolio_block">
<img src="../images/portfolio/img/street/photo_street_1.jpg" alt="photo">
<img src="../images/portfolio/img/strreet/photo_streeit_2.jpg" alt="photo">
<img src="../images/portfolio/img/street/photo_street_3.jpg" alt="photo">
<img src="../images/portfolio/img/street/photo_street_4.jpg" alt="photo">
<img src="../images/portfolio/img/street/photo_streeit_5.jpg" alt="photo">
<img src="../images/portfolio/img/street/photo_street_6.jpg" alt="photo">
</div>

<div id="love_story" class="portfolio_block">
<img src="../images/portfolio/img/love_stroy/photo_love_story_1.jpg" alt="photo">
<img src="../images/portfolio/img/love_stroy/photo_love_story_2.jpg" alt="photo">
<img src="../images/portfolio/img/love_stroy/photo_love_story_3.jpg" alt="photo">
<img src="../images/portfolio/img/love_stroy/photo_love_story_4.jpg" alt="photo">
<img src="../images/portfolio/img/love_stroy/photo_love_story_5.jpg" alt="photo">
</div>

<div id="wedding" class="portfolio_block">
<img src="../images/portfolio/img/wedding/wedding_1.jpg" alt="photo">
<img src="../images/portfolio/img/wedding/wedding_2.jpg" alt="photo">
<img src="../images/portfolio/img/wedding/wedding_3.jpg" alt="photo">
<img src="../images/portfolio/img/wedding/wedding_4.jpg" alt="photo">
<img src="../images/portfolio/img/wedding/wedding_5.jpg" alt="photo">
</div>

Comments

[FeST1VaL]

Песочницу сделайте. А то мы за вас чтоль еще код будем дописывать на JS?

[ProjectSoft]

seegalus без песочницы ваш вопрос умрёт без решения.
https://jsfiddle.net/
https://codepen.io/pen/