All geek questions in one place

Stop jQuery Navigate to uploaded content

I have a div with being replaced by specific user actions. These actions are performed under the replaceable div, and in the case when the div is too large to fully fit into the viewport, as well as the buttons used to change it, the browser will move to the beginning of the newly loaded case. This is annoying.

Does anyone know how to stop this? Greetings.

Here is the jQuery code. ChartContent is a small html frame

function UpdateChartImage(ChartContent) {
//do updates on div here 
    var existingChart = $("#" + $(ChartContent).attr("id"));
    existingChart.fadeOut("fast", function() { existingChart.replaceWith(ChartContent); }).fadeIn("fast");
}

By the way, I forbade the button to do this by default, so I do not think that this is due to this.

+3
source share
8 answers

. , . , . , , , . html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
    function UpdateChartImage(ChartContent) {
        //do updates on div here
        var existingChart = $("#content");
        existingChart.fadeOut("fast", function() { 
            existingChart.html(ChartContent);

            // sets body height to match the end-height
            $(document.body).height($(document.body).height());
        }).fadeIn("fast");
    }

    $(function() {
        $('#div_change').click(function(){
        UpdateChartImage("asdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshad")
        })
    });
</script>
</head> 

<body style="padding: 0; margin: 0;"> 
    <div id="header" style="height: 200px; background-color: #0FF;">this is the header</div>
    <div id="content" style=""></div>
    <div id="footer" style="height: 200px; background-color: #ced;">this is the footer</div>
    <a id="div_change">click me to change the body div content</a>
</body>
</html>

, !

+2

:

div . fadeOut , ( none). . div . - , . , fadeIn div. , .

, - , . div ? , .

+1

, , $.width() $.height() $.css(). .

0

, , , .

window.st = document.body.scrollTop;
window.sl = document.body.scrollLeft;

//do updates on div here

document.body.scrollTop = window.st;
document.body.scrollLeft = window.sl;

EDIT:

jquery, false , .

$('#item').click (function () {  
    // stuff here  
    return false;//prevent page from jumping at the top when long page items are rendered
});
0

- ?

<a href="#" onclick="[your jQuery call]">

href="#" , .

0

, . .

, , :

0

, , , , .

Try adding another div around the div you are updating, and set it to: relative;

It worked for me. Of course, the content below will still jump-like if the content is resized, but the scrollbar does not jump up the top of the page.

Example:

<div style="position: relative;">
  <div id="ajax_update">
    //This is what jQuery will update.
  </div>
</div>
0
source 
event.preventDefault();

Worked for me.

-1
source

Source: https://habr.com/ru/post/1720767/

More articles:


All Articles