Ссылки на верх и низ с помощью CSS - PullRequest
Новая
       7

Ссылки на верх и низ с помощью CSS

0 голосов
/ 12 июня 2018

Может кто-нибудь сказать мне, что является хорошим способом создания ссылок для перехода по странице?

У меня уже есть один для того, чтобы идти вверх и он работает просто отлично, но у меня возникают некоторые проблемы, когдасоздание одного для нижнего края.

Это то, что я пытаюсь сделать (очевидно, у меня другое изображение для нижнего):

enter image description here

<a href="#Top" name="Top" id="Top" class="cd-top cd-is-visible cd-fade-out" >Top</a>
<a href="#Bot" name="Bot" id="Bot" class="cd-bottom cd-is-visible cd-fade-out">Bottom</a>

и это CSS, который я использую: 

/******************** Back to top and/or bottom ********************/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  top: 45%;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #03a400 url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 63;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  /*    opacity: .5; */
}
.cd-top:hover {
  background-color: #489148;
  opacity: 1;
}

.cd-bottom {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 45%;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #03a400 url(images/cd-bottom-arrow.png) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

Вот JavaScript, который я использую: 

;jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 1200,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

        //grab the "back to bottom" link
        $back_to_bottom = $('.cd-bottom');      

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) {
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });

    //hide or show the "back to bottom" link
    $(window).scroll(function(){
        ( $(this).scrollBottom() > offset ) ? $back_to_bottom.addClass('cd-is-visible') : $back_to_bottom.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollBottom() > offset_opacity ) {
            $back_to_bottom.addClass('cd-fade-out');
        }
    });

    //smooth scroll to bottom
    $back_to_bottom.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });

});

По какой-то причине я не могу заставить вторую кнопку появиться на экране. Если кто-нибудь подскажет мне лучший подход или подскажет, где моя ошибка, я буду более чем благодарен

Заранее спасибо.

1 Ответ

0 голосов
/ 12 июня 2018

Редактировать:

Нажатие кнопки не работает, поскольку вы установили scrollTop на 0. Если вы обновите его до высоты страницы, она будет работать.Вот обновленная скрипка с прокручиваемой страницей: http://jsfiddle.net/twvn1z3s/7/

Предполагая, что это весь ваш CSS - вам нужно внести небольшие изменения в свой CSS.Например, вы определяете:

.cd-top.cd-is-visible, где вы устанавливаете opacity / visibility, но не для кнопки bottom.

Измените старое правило на: 

.cd-top.cd-is-visible,
.cd-bottom.cd-is-visible{
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}

И это появится.Как только нижняя кнопка станет видимой, вам нужно изменить положение кнопок, чтобы они не перекрывались (так как у них обоих установлены смещения, значения которых вызывают небольшое перекрытие) - я установил здесь значение 30%: http://jsfiddle.net/twvn1z3s/2/

...