Good day! This script automatically scrolls the page to the .cover-b block immediately after loading the page itself.

<a href="#" id="top"><div class="arrow arrow_top"></div></a> $(document).ready(function() { var height = $(this).height(); var scrollTop = $(this).scrollTop(); if(scrollTop <= height) { $('html, body').delay(1).animate({ scrollTop: $(".cover-b").offset().top }, 600, 'easeOutQuint', function() { if(!isComplete) { isComplete = true; } }); } });

Please help me add the function of scrolling the page up to the existing script by clicking on the link with id = "top". Thank you for your help!

html:

 <html> <head> </head> <body> <div class="cover"> <div class="content"> </div> <div class="cover-b"></div> </div> <div class="page" id="page"> </div> <div id="top-panel"> <a href="#" id="top"><div class="arrow arrow_top"></div></a> </div> <div class="footer"> <div class="fbox"> </div> </div> </body> </html>

css:

 .cover { position: relative; overflow: hidden; min-height: 100%; background: url(cover.jpg) no-repeat; background-size: cover; background-position: right bottom; visibility: visible; box-sizing: border-box; } .cover .content { position: relative; width: 100%; height: 100%; } .cover-b { position: absolute; bottom: 0; width: 100%; height: 76px; } .page { margin: 0 auto; width: 100%; } #top-panel { position: fixed; overflow: hidden; width: 100%; height: 66px; top: 0; } #top { width: 36px; height: 36px; position: absolute; } #top .arrow { position: relative; } #top .arrow_top { width: 0px; height: 0px; } #top .arrow_top:after { position: absolute; content:""; width: 10px; height: 10px; }

css cleaned out too much

  • @ Jean-Claude, questions removed from the links above - Grundy
  • html / css here ... - Jean-Claude
  • html / css here, added - LADYX
  • jsbin.com/camopoqoze/edit?html,output - Jean-Claude
  • quit smoking. I do not do programming. You can not be an expert in all directions at once at the same time. In your example, give the cover-a block a height of 100%, and the cover-b and cover-c auto blocks, and notice that the 'up' scroll doesn't work correctly. Unfortunately, your answer does not solve my problem. Is the programmer able to correct his mistake? - LADYX

2 answers 2

Http://jsbin.com/camopoqoze/edit?html,output

 $(document).ready(function() { var isComplete = false; var height = $(this).height(); var scrollTop = $(this).scrollTop(); if (scrollTop <= height) { $('html, body').delay(2).animate({ scrollTop: $(".cover-c").offset().top }, 1500, function() { if (!isComplete) { isComplete = true; } }); } $('a').on('click', function(event) { event.preventDefault(); console.log($('.cover-a').height()); $('html, body').animate({ scrollTop: $(document).scrollTop() - $('.cover-a').height() }, 500) }); }); 
 * { margin: 0; padding: 0; } html, body { height: 100%; } div { height: 100%; } div.cover-a { background-color: #69f; } div.cover-b { background-color: tomato; } div.cover-c { background-color: green; } a { text-decoration: underline; position: fixed; top: 10px; left: 10px; background-color: yellow; cursor: pointer; padding: 0 4px 3px 4px; } 
 <!DOCTYPE html> <html> <head> <title>titile</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div class="cover-a"></div> <div class="cover-b"></div> <div class="cover-c"></div> <a>Вверх</a> </body> </html> 

     $(document).ready(function() { var height = $(this).height(); var scrollTop = $(this).scrollTop(); if(scrollTop <= height) { $('html, body').delay(1).animate({ scrollTop: $(".cover-b").offset().top }, 600, 'easeOutQuint', function() { }); } }); $(function(){ $.fn.scrollToTop=function(){ $(this).hide().removeAttr("href"); if($(window).scrollTop()!="0"){ $(this).fadeIn("slow") } var scrollDiv=$(this); $(window).scroll(function(){ if($(window).scrollTop()=="0"){ $(scrollDiv).fadeOut("slow") }else{ $(scrollDiv).fadeIn("slow") } }); $(this).click(function(){ $("html, body, .pagebox").animate({scrollTop:0},"slow") }) } }); $(function() {$("#top").scrollToTop();});