Как сделать возврат при нажатии на кнопку «скрыть» к исходной точке?

Question

[Владимир Дубровский]

Добрый. Есть скрипт, который работает и выполняет своё назначение: скрывает часть контента, отображает ссылку или кнопу «читать больше», раскрывает контент и закрывает его по кнопке «скрыть». Один нюанс меня не устраивает. При нажатии на кнопку «скрыть», в отличии от других подобных скриптов, область просмотра на экране уползает ниже отдельного непрочитанного контента.
Одним словом имеется ли возможность дополнить этот скрипт так, чтобы при нажатии на кнопку «скрыть» пользователь возвращался к первоначальной точке (которой является кнопка «читать больше»)?

(function($) {

    $.fn.iComputerSlide = function(options) {

        options = $.extend({
            height: 200,
            btnClose: "Close",
            btnOpen: "Open"
        }, options);

        makeWrap = function($element, options) {
            return '<div class="io_item">' +
                '<div class="io_item_wrap" style="max-height:' + options.height + 'px">' + $element[0].outerHTML +
                '<div class="io_trans"></div>' +
                '</div>' +
                '<div class="io_button_wrap">' +
                '<a class="io_button btn_close">' + options.btnClose + '</a>' +
                '<a class="io_button btn_open">' + options.btnOpen + '</a>' +
                '</div>' +
                '</div>';
        };

        $(document).on("click", ".io_button", function() {
            $(this).parents(".io_item").toggleClass("open");
        });

        return this.each(function() {
            var $element = $(this);
            $element.replaceWith(makeWrap($element, options));
        });
    };
})(jQuery);

$(function() {

    $(".item_text").iComputerSlide({
        height: 150,
        btnClose: "Свернуть",
        btnOpen: "Читать"
    });
});

Comments

[imko]

scrollBy на высоту скрываемого элемента просто

[Владимир Дубровский]

Не вариант... расстояние в разных блоках всегда разное...

Answer 1

[Rsa97]

scrollIntoView()

Comments

[Владимир Дубровский]

scrollIntoView() работает:

let btn = document.querySelector('.btn_close');
let el = document.querySelector('.btn_close');
btn.addEventListener('click', function () {
    el.scrollIntoView(true);
});

но только с первой вставкой скрытого текста. Если на той же странице использовать другие скрытые вставки, то работает только первая, по крайней мере в хроме. Есть другой вариант скрипта, где это реализовано:

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 230;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Показать больше";
    var lesstext = "Скрыть";

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            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;
    });
});

но он не подходит по иным причинам...

[Rsa97]

Владимир Дубровский, Ну так querySelector возвращает только первый найденный элемент. Используйте всплытие:

document.querySelector('body').addEventListener(
  'click',
  function (e) {
    if (e.currentTarget.classList.contains('btn_close')) {
      e.currentTarget.scrollIntoView(true);
    }
  },
);

[Владимир Дубровский]

Rsa97, Спасибо... А как объединить Это:

let btn = document.querySelector('.btn_close');
let el = document.querySelector('.btn_close');
btn.addEventListener('click', function () {
    el.scrollIntoView(true);
});

С этим:

document.querySelector('body').addEventListener(
  'click',
  function (e) {
    if (e.currentTarget.classList.contains('btn_close')
      e.currentTarget.scrollIntoView(true);
    },
);

[Rsa97]

Владимир Дубровский, Не объединять, а заменить.

[Владимир Дубровский]

Rsa97, при простой замене одного на другое скрипт не работает от слова совсем.. может скобки не хватает..

[Rsa97]

Владимир Дубровский, Да, поправил

[Владимир Дубровский]

Rsa97, вот конечный код:

(function($) {

    $.fn.iComputerSlide = function(options) {

        options = $.extend({
            height: 200,
            btnClose: "Close",
            btnOpen: "Open"
        }, options);

        makeWrap = function($element, options) {
            return '<div class="io_item">' +
                '<div class="io_item_wrap" style="max-height:' + options.height + 'px">' + $element[0].outerHTML +
                '<div class="io_trans"></div>' +
                '</div>' +
                '<div class="io_button_wrap">' +
                '<a class="io_button btn_close">' + options.btnClose + '</a>' +
                '<a class="io_button btn_open">' + options.btnOpen + '</a>' +
                '</div>' +
                '</div>';
        };

        $(document).on("click", ".io_button", function() {
            $(this).parents(".io_item").toggleClass("open");
        });

        return this.each(function() {
            var $element = $(this);
            $element.replaceWith(makeWrap($element, options));

document.querySelector('body').addEventListener(
  'click',
  function (e) {
    if (e.currentTarget.classList.contains('btn_close')) {
      e.currentTarget.scrollIntoView(true);
    }
  },
);
        });
    };
})(jQuery);

$(function() {

    $(".item_text").iComputerSlide({
        height: 150,
        btnClose: "Свернуть",
        btnOpen: "Читать"
    });
});

Вот сайт для теста: https://test.remont-delo.ru/10170.html

Но к сожалению не работает...

[Rsa97]

Владимир Дубровский, Вечно я путаюсь в двух параметрах.
Замените currentTarget на target
А вообще, раз у вас jQuery

$('body').on(
  'click',
  '.btn_close',
  function (e) {
    e.target.scrollIntoView(true);
  },
);

[Владимир Дубровский]

Rsa97, Спасибо! С этим вариантом всё работает как требовалось...