jQuery(document).ready(function($) { $('a[href^="#"]').click(function() { elementClick = $(this).attr("href"); destination = $(elementClick).offset().top; if ($.browser.safari) { $('body').animate({ scrollTop: destination }, 2000); } else { $('html').animate({ scrollTop: destination }, 2000); } return false; }); }); 
 html, body { min-width: 100%; max-width: 300%; width: 100%; min-height: 100%; max-height: 300%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: hidden; position: relative; } a { color: #000; text-decoration: none; border: 1px solid #000; padding: 5px; margin: 10px; position: relative; top: 20px; font-size: 12px; } .container { min-width: 100%; max-width: 300%; width: 100%; min-height: 100%; max-height: 300%; height: 100%; position: relative; } /**/ #a, #b, #c { width: 100%; height: 100%; position: absolute; } #a { left: 0; top: 0; background: #f00; } #b { left: 100%; top: 0; background: #c01; } #c { left: 200%; top: 0; background: #df0101; } /*center*/ #d, #e, #f { width: 100%; height: 100%; position: absolute; } #d { left: 0; top: 100%; background: yellow; } #e { left: 100%; top: 100%; background: green; } #f { left: 200%; top: 100%; background: lightblue; } /*bottom*/ #g, #k, #y { width: 100%; height: 100%; position: absolute; } #g { left: 0; top: 200%; background: grey; } #k { left: 100%; top: 200%; background: darkgrey; } #y { left: 200%; top: 200%; background: lightgrey; } #a:before { content: "первая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #b:before { content: "вторая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #c:before { content: "третья страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #d:before { content: "четвёртая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #e:before { content: "пятая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #f:before { content: "шестая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #g:before { content: "седьмая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #k:before { content: "восьмая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #y:before { content: "девятая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="container"> <div class="top"> <div id="a"> <a href="#b">правее</a> <a href="#d">ниже</a> </div> <div id="b"> <a href="#a">левее</a> <a href="#e">ниже</a> <a href="#c">правее</a> </div> <div id="c"> <a href="#b">левее</a> <a href="#f">ниже</a> </div> <div id="d"> <a href="#a">выше</a> <a href="#e">правее</a> <a href="#f">правее</a> </div> <div id="e"> <a href="#d">левее</a> <a href="#b">выше</a> <a href="#f">правее</a> <a href="#k">ниже</a> </div> <div id="f"> <a href="#c">выше</a> <a href="#e">левее</a> <a href="#y">ниже</a> </div> <div id="g"> <a href="#d">выше</a> <a href="#k">правее</a> </div> <div id="k"> <a href="#g">левее</a> <a href="#e">выше</a> <a href="#y">правее</a> </div> <div id="y"> <a href="#f">выше</a> <a href="#k">левее</a> </div> </div> </div>

Posted by html with large fields, there is a need to make an animated scroll to anchors, there are 9 of them, the point is to be seen where the link is redirected. The page is arranged crosswise and in each cell (signed and given color) the transition was up or to the right, or down and anywhere. Links are linked to anchors, if there is an animated scroll, it will be very impressive. Help with js.

  • Similar to this question .stackflowflow.com/ questions/ 453267/… - Visman
  • does not work in my case - user33274
  • scrolling stops working altogether - in my second example (I didn’t post it here), I just need to scroll up and down, it works, and where there are a lot of scrolls, then no - user33274

1 answer 1

You had a few typos in the code, watch your code. I added an animated scrollLeft property. The if ($.browser.safari) { not quite true, not only in safari, this happens, in firefox, scrollTop for $ ('html') also does not work, it will write a universal solution like this: $('body,html').animate({

 jQuery(document).ready(function($) { $('a[href^="#"]').click(function() { elementClick = $(this).attr("href"); destination = $(elementClick).offset(); $('body,html').animate({ scrollTop: destination.top, scrollLeft: destination.left, }, 2000); return false; }); }); 
 html, body { min-width: 100%; max-width: 300%; width: 100%; min-height: 100%; max-height: 300%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: hidden; position: relative; } a { color: #000; text-decoration: none; border: 1px solid #000; padding: 5px; margin: 10px; position: relative; top: 20px; font-size: 12px; } .container { min-width: 100%; max-width: 300%; width: 100%; min-height: 100%; max-height: 300%; height: 100%; position: relative; } /**/ #a, #b, #c { width: 100%; height: 100%; position: absolute; } #a { left: 0; top: 0; background: #f00; } #b { left: 100%; top: 0; background: #c01; } #c { left: 200%; top: 0; background: #df0101; } /*center*/ #d, #e, #f { width: 100%; height: 100%; position: absolute; } #d { left: 0; top: 100%; background: yellow; } #e { left: 100%; top: 100%; background: green; } #f { left: 200%; top: 100%; background: lightblue; } /*bottom*/ #g, #k, #y { width: 100%; height: 100%; position: absolute; } #g { left: 0; top: 200%; background: grey; } #k { left: 100%; top: 200%; background: darkgrey; } #y { left: 200%; top: 200%; background: lightgrey; } #a:before { content: "первая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #b:before { content: "вторая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #c:before { content: "третья страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #d:before { content: "четвёртая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #e:before { content: "пятая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #f:before { content: "шестая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #g:before { content: "седьмая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #k:before { content: "восьмая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } #y:before { content: "девятая страница"; position: absolute; top: 50%; left: 40%; font-size: 50px; color: transparent; text-shadow: 0 0 1px #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="container"> <div class="top"> <div id="a"> <a href="#b">правее</a> <a href="#d">ниже</a> </div> <div id="b"> <a href="#a">левее</a> <a href="#e">ниже</a> <a href="#c">правее</a> </div> <div id="c"> <a href="#b">левее</a> <a href="#f">ниже</a> </div> <div id="d"> <a href="#a">выше</a> <a href="#e">правее</a> <a href="#f">правее</a> </div> <div id="e"> <a href="#d">левее</a> <a href="#b">выше</a> <a href="#f">правее</a> <a href="#k">ниже</a> </div> <div id="f"> <a href="#c">выше</a> <a href="#e">левее</a> <a href="#y">ниже</a> </div> <div id="g"> <a href="#d">выше</a> <a href="#k">правее</a> </div> <div id="k"> <a href="#g">левее</a> <a href="#e">выше</a> <a href="#y">правее</a> </div> <div id="y"> <a href="#f">выше</a> <a href="#k">левее</a> </div> </div> </div>

  • does not work at all! the scrolling has disconnected, and that is the crap that when adding a link to ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js, scrolling stops working altogether and I didn’t scroll through the noconflict and in your example "Run code" - user33274