JQuery page positioning

Description of Requirement:

1. As shown in the figure above, when the VFC filter condition exists, scroll to the position of the VFC value when the page is loaded.

2. When the page scrolls down to a certain height, the commonly used buttons are hidden. For a good user experience, the commonly used buttons are fixed and displayed.

3. When multiple inputs are used to input data, when the input loses focus and enter is clicked, it is judged whether there is the next input. If so, focus to the end of the line of the next input input box.

JQuery effect realization:

1、

function setupProductsSitePageRankPage () {
        var $productSitePageRankMoudle = $('.products-sitepage-rank-page'),
            $modalRank = $productSitePageRankMoudle.find('.change-rank-modal'),
            $submitRank = $modalRank.find('.submit-rank-form'),
            $checkboxes = $productSitePageRankMoudle.find('.checkboxes'),
            $inputNum = $productSitePageRankMoudle.find('.input-number'),
            vfcText = $productSitePageRankMoudle.find('.vfc-text').val(),
            $obj;

        //if no checkbox is checked,'change rank' button is disabled.
        if ($('input[type=checkbox]:checked').length > 0) {
            $('.change-rank-btn').prop('disabled', false);
            $('.change-rank-btn').removeClass('disabled');
        } else {
            $('.change-rank-btn').prop('disabled', true);
            $('.change-rank-btn').addClass('disabled');
        }

        //Window scroll to where matched the vfc.
        function getJqObjByText(content) {
            var $ele;
            $("span:contains('" + content + "')").each(function () {
                if (this.innerHTML == content) {
                    $ele = $(this); //Get the jquery object
                    return false; //Add this sentence to jump out of $.each when the first matching element is found.
                }
            });
            return $he;
        }

        $("html,body").animate({
            scrollTop: getJqObjByText(vfcText).offset().top - 100
        }, 400);

        //With the window scrolled up util'change rank'btn,fix the btn.
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $('.fixed-change-rank').show();
            } else {
                $('.fixed-change-rank').hide();
            }
        });

        //Change Rank modal on submit,location reload.
        $modalRank.find('.submit-rank-btn').on('click', function () {
            var $this = $(this),
                rank = $modalRank.find('.rank').val(),
                pvlist = [],
                pv,
                jsonval;

            $productSitePageRankMoudle.find('.checkboxes').each(function () {
                var $this = $(this);

                if ($this.prop('checked')) {
                    jsonval = $this.data('json');
                    pvlist.push(jsonval);
                }
            });

            pv = JSON.stringify(pvlist);

            $.ajax({
                url: getUncachedUrl($this.data('url')),
                type: 'POST',
                data: {
                    pv: pv,
                    rank: rank
                },
                success: function (data) {
                    //console.log(data);  
                    if (data.status === 's') {
                        toastr.success(data.message);
                        location.reload(true);
                    } else {
                        toastr.error(data.message);
                    }

                    $this.removeClass('loading');
                },
                error: function () {
                    showNotificationError ();
                    $this.removeClass('loading');
                }
            });
            return false;
        });

        //Page Rank changed.
        $inputNum.on('change', function () {
            var $this = $(this),
                rank = $this.val(),
                jsonval = $this.closest('tr').find('.checkboxes').data('json'),
                pvlist = [],
                pv;

            pvlist.push(jsonval);

            pv = JSON.stringify(pvlist),

            $.ajax({
                url: getUncachedUrl('/products/sitepagerankhandler'),
                type: 'POST',
                data: {
                    act: 'edit-rank',
                    pv: pv,
                    rank: rank
                },
                success: function (data) {
                    //console.log(data);  
                    if (data.status === 's') {
                        toastr.success(data.message);
                        //location.reload(true);
                    } else {
                        toastr.error(data.message);
                    }

                    $this.removeClass('loading');
                },
                error: function () {
                    showNotificationError ();
                    $this.removeClass('loading');
                }
            });
        });

        $inputNum.on('keypress', function (e) {
            var $this = $(this);

            if (e.which === 13) {
                $this.blur();

                if ($this.parent().parent().next('tr').find('.input-number')) {
                    var content = $this.parent().parent().next('tr').find('.input-number').val();
                    $this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);
                } else {
                    return false;
                }
            }
        });
    }

Notice:

1. Get the text value of a non-input element, such as a div. If the div contains multiple levels of div, use to get the text content.

span:contains('" + content + "')

2. The operation of positioning the cursor to the end of the line is equivalent to copying the original content in the input and then assigning the value to the input.

var content = $this.parent().parent().next('tr').find('.input-number').val();
$this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);