0

Всегда использовал эту комбинацию, но в последнем проекте никак не могу справиться. Блок со стрелкой должен располагаться в левой части экрана (слева от контента), но он располагается под футером (скриншот) удлиняет страницу

HTML:

<!DOCTYPE html>
<html>
<head>

</head>

<body>


            <div class="all_body">
    <!-- Главное меню -->
<div class="main_menu">

</div>
    <!-- Главное меню конец -->

    <!-- Контент -->
        <div class="content">

<table class="main_table_content">
<tr>
<td width="*">

</td>

<td width="15%" style="border-left: 1px solid black;">

                                <!-- Панель пользователя -->

    <div id="user_panel">

    </div>

</td>
</tr>
</table>
        </div>
    <!-- Контент конец -->



<div id="footer">

                                     <!-- POPup -->
    <div id="popupContact">
    <a id="popupContactClose">X</a>
    <h1>Форма для отправки письма</h1>
    <p id="contactArea">

    </p>
    </div>
    <div id="backgroundPopup"></div>
                                    <!-- POPup end -->

    <table width="100%" height="550px">
        <td width="35%"> <!-- кнопы футера -->

        </td>
        <td width="1%">

        </td>
        <td width="*"> <!-- баннеры рекламы -->

        </td>
    </table>
</div>
            </div>




<!-- scroll arrow -->
<p id="back-top"><a href="#"><span></span></a></p>


</body>
</html>

CSS: (стили стрелки в самом низу)

body {
    background: url(../img/back_top.jpg);
}
A img {
   border: none;
}
A {
   color: black; Text-decoration: none;
}
A:visited {
   color: black; Text-decoration: none;
}
A:active {
   color: black; Text-decoration: none;
}
A:hover {
   color: black; Text-decoration: none;
}

div.all_body {
   width: 100%;
   background: url(../img/back.jpg);
   margin: 0 auto;
   padding: 0 auto;
}

div.main_menu {
    width: 100%;
    height: 200px;
    text-align: center;
    background: url(../img/back.jpg);
    margin-top: 10px;
}

.main_table_content #user_panel {
    text-align: center;
    z-index: 101;
    display: block;
}

#user_panel .img_panel {
    width: 150px;
    height: 210px;
    align: center;
    border: 1px solid black;
    border-radius: 15px;
    margin: 20px;
}

.username_panel {
    font:1.1em Segoe Print,sans-serif;
}

div.content {
    background: url(../img/back.jpg);
    margin: 0 auto;
    padding: 0 auto;
    width: 93em;
    border: 1px solid black;
    border-radius: 15px;
}

.main_table_content {
    width: 100%;
}

.main_table_content td {
    vertical-align: top;
    padding: 5px;
    text-align: center;
}

.main_table_content p {
    margin: 10px;
}

.content_table {
    width: 100%;
    margin-top: 20px;
}

.content_table td {
  background: white;
  border: 1px solid black;
  border-radius: 15px;
}

#footer {
    width: 93em;
    height: 555px;
    margin: 0 auto;
    padding: 0 auto;
    background: white;
    margin-top: 20px;
    position: relative;
    border: 1px solid black;
    border-radius: 15px;
    margin-bottom: 20px;
}

#footer .footer_rekl {
  align:center;
  margin-left:25px;
  margin-top:10px;
  border:0;
}


/****************************** scroll-arrow *****************************/
#back-top{
    position:fixed;
    bottom:10px;
    left: -6px;
    z-index: 999;
    border:0;
}

#back-top a{
    width:50px;
    display:block;
    text-align:center;
    font:11px/100% Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    background-color: transparent;
    -webkit-transition:1s;
    -moz-transition:1s;
    transition:1s;
    border:0;
    z-index: 999;
}

/* графическая стрелка */
#back-top span{
    width:50px;
    height:800px;
    display:block;
    margin-bottom:7px;
    background: url('../img/up-arrow.png') no-repeat bottom center;
    -webkit-transition:1s;
    -moz-transition:1s;
    transition:1s;
    opacity: 0.4;
    filter: alpha(opacity=0.4);
    border:0;
    z-index: 999;
}

#back-top span:hover {
   opacity: 1;
   filter: alpha(opacity=1);
   border:0;
}

#back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}

JS:

$(document).ready(function(){

    $(function (){
        $("#back-top").hide();

        $(window).scroll(function (){
            if ($(this).scrollTop() > 700){
                $("#back-top").fadeIn();
            } else{
                $("#back-top").fadeOut();
            }
        });

        $("#back-top a").click(function (){
            $("body,html").animate({
                scrollTop:0
            }, 800);
            return false;
        });
    });
});
1
  • Скорректировал, но проблема осталась. Кстати для теста div footer вообще удалил - то же самое
    – FlatOMG
    3 окт 2016 в 9:48

2 ответа 2

1

Я картинки не выбирал особо, подправите под себя

jQuery(function() {
  $("#Go_Top").hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $("#Go_Top").fadeIn("slow")
  $(window).scroll(function() {
    if ($(window).scrollTop() <= "250") $("#Go_Top").fadeOut("slow")
    else $("#Go_Top").fadeIn("slow")
  });

  $("#Go_Bottom").hide().removeAttr("href");
  if ($(window).scrollTop() <= $(document).height() - "999") $("#Go_Bottom").fadeIn("slow")
  $(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - "999") $("#Go_Bottom").fadeOut("slow")
    else $("#Go_Bottom").fadeIn("slow")
  });

  $("#Go_Top").click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, "slow")
  })
  $("#Go_Bottom").click(function() {
    $("html, body").animate({
      scrollTop: $(document).height()
    }, "slow")
  })
});
html,
body {
  min-height: 4000px;
  background: rgba(0, 0, 0, .1);
}
img {
  width: 50px;
  height: 50px;
}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;' href='#' id='Go_Top'>
  <img src="http://www.iconsearch.ru/uploads/icons/sphericaicons/128x128/scrollup.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right:0; cursor:pointer; display:none;' href='#' id='Go_Bottom'>
  <img src="http://www.clipartbest.com/cliparts/dcr/MKo/dcrMKo4qi.png" alt="Вниз" title="Вниз">
</a>


<div class="Go_bottom"></div>

источник

1
  • Спасибо. Хоть и не ответ, но такой способ вполне меня устроил!
    – FlatOMG
    3 окт 2016 в 13:33
1

Добавьте #footer { overflow: hidden; } или clearfix.

Потому что у Вас в футере таблица с высотой 550px.

Для наглядности изменила фон #footer и кнопки #back-top на черный, добавила высоты контенту. Только для наглядности!:

$(document).ready(function(){

    $(function (){
        $("#back-top").hide();

        $(window).scroll(function (){
            if ($(this).scrollTop() > 700){
                $("#back-top").fadeIn();
            } else{
                $("#back-top").fadeOut();
            }
        });

        $("#back-top a").click(function (){
            $("body,html").animate({
                scrollTop:0
            }, 800);
            return false;
        });
    });
});
body {
    background: url(../img/back_top.jpg);
}
A img {
   border: none;
}
A {
   color: black; Text-decoration: none;
}
A:visited {
   color: black; Text-decoration: none;
}
A:active {
   color: black; Text-decoration: none;
}
A:hover {
   color: black; Text-decoration: none;
}

div.all_body {
   width: 100%;
   background: url(../img/back.jpg);
   margin: 0 auto;
   padding: 0 auto;
}

div.main_menu {
    width: 100%;
    height: 200px;
    text-align: center;
    background: url(../img/back.jpg);
    margin-top: 10px;
}

.main_table_content #user_panel {
    text-align: center;
    z-index: 101;
    display: block;
}

#user_panel .img_panel {
    width: 150px;
    height: 210px;
    align: center;
    border: 1px solid black;
    border-radius: 15px;
    margin: 20px;
}

.username_panel {
    font:1.1em Segoe Print,sans-serif;
}

div.content {
    background: url(../img/back.jpg);
    margin: 0 auto;
    padding: 0 auto;
    width: 93em;
    border: 1px solid black;
    border-radius: 15px;
  
  height: 800px; /* Только для наглядности.  */
}

.main_table_content {
    width: 100%;
}

.main_table_content td {
    vertical-align: top;
    padding: 5px;
    text-align: center;
}

.main_table_content p {
    margin: 10px;
}

.content_table {
    width: 100%;
    margin-top: 20px;
}

.content_table td {
  background: white;
  border: 1px solid black;
  border-radius: 15px;
}

#footer {
    width: 93em;
    height: 555px;
    margin: 0 auto;
    padding: 0 auto;
    background: white;
    margin-top: 20px;
    position: relative;
    border: 1px solid black;
    border-radius: 15px;
    margin-bottom: 20px;

    overflow: hidden; /* Добавить */
    background: #333; /* Для наглядности */
}

#footer .footer_rekl {
  align:center;
  margin-left:25px;
  margin-top:10px;
  border:0;
}


/****************************** scroll-arrow *****************************/
#back-top{
    position:fixed;
    bottom:10px;
    left: -6px;
    z-index: 999;
    border:0;
  
      background: aqua; /* Для наглядности */
}

#back-top a{
    width:50px;
    display:block;
    text-align:center;
    font:11px/100% Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    background-color: transparent;
    -webkit-transition:1s;
    -moz-transition:1s;
    transition:1s;
    border:0;
    z-index: 999;
}

/* графическая стрелка */
#back-top span{
    width:50px;
    height:800px;
    display:block;
    margin-bottom:7px;
    background: url('../img/up-arrow.png') no-repeat bottom center;
    -webkit-transition:1s;
    -moz-transition:1s;
    transition:1s;
    opacity: 0.4;
    filter: alpha(opacity=0.4);
    border:0;
    z-index: 999;
}

#back-top span:hover {
   opacity: 1;
   filter: alpha(opacity=1);
   border:0;
}

#back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}
<!DOCTYPE html>
<html>
<head>
<title>пример</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  
</head>

<body>
  <div class="all_body">
    <!-- Главное меню -->
   <div class="main_menu"> </div>
    <!-- Главное меню конец -->

    <!-- Контент -->
    <div class="content">

      <table class="main_table_content">
        <tr>
         <td width="*"> </td>

         <td width="15%" style="border-left: 1px solid black;">

                                <!-- Панель пользователя -->

            <div id="user_panel">  </div>

         </td>
      </tr>
     </table>
   </div>
    <!-- Контент конец -->



<div id="footer">

                                     <!-- POPup -->
    <div id="popupContact">
      <a id="popupContactClose">X</a>
      <h1>Форма для отправки письма</h1>
      <p id="contactArea">

      </p>
    </div>
    <div id="backgroundPopup"></div>
                                    <!-- POPup end -->

        <table width="100%" height="550px">
            <td width="35%"> <!-- кнопы футера -->

            </td>
            <td width="1%">

            </td>
            <td width="*"> <!-- баннеры рекламы -->

            </td>
        </table>
    </div>
 </div>




<!-- scroll arrow -->
<p id="back-top"><a href="#"><span></span></a></p>


</body>
</html>

*И исправьте везде padding: 0 auto; на padding: 0;

1
  • спасибо, но у меня так и не заработало, хотя на Вашем исправленном примере все ок. Видимо у меня еще где-то конфликт (я не весь код выкладывал)
    – FlatOMG
    3 окт 2016 в 13:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.