смещение для ссылки "назад к началу" - PullRequest
Новая
       78

смещение для ссылки "назад к началу"

1 голос
/ 04 августа 2020

Я использую wordpress и хотел создать кнопку прокрутки вверх, поэтому я добавил этот код в виджет HTML в области виджетов заголовка своего сайта: 

<div id="top"></div>
<style>html {
  scroll-behavior: smooth;
}</style>`

Затем я добавил этот пользовательский пункт меню в нижний колонтитул: #top. Прокрутка работает отлично, за исключением того, что она не прокручивается до самого верха страницы. Но в моем случае вместо липкого заголовка у меня есть заголовок социальных иконок, см. Снимок экрана: https://ibb.co/NFsgJ1H. Может ли кто-нибудь помочь мне добавить код, который будет выполнять прокрутку до верхней части этого заголовка? Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 05 августа 2020

Теперь у меня есть плагин, который выполняет смещение прокрутки, поэтому я задал этот вопрос, я пытаюсь избавиться от него, потому что это можно сделать более эффективным способом. В любом случае этот код есть в файле JS этого плагина. Когда я его удаляю, это не влияет на плавную прокрутку и смещение прокрутки. 

    app.scroll = function( scrollTo ) {
    app.$html_and_body.stop().animate({
        'scrollTop': scrollTo // scroll and offset
    }, 900, 'swing', function( evt ) {
        app.initialScroll = app.isScrolling = false;
        app.$html_and_body.trigger( 'hash_link_scroll_offset.complete', evt );
    } );

Я также нашел этот код в файле php плагина, и когда я его удаляю, плавная прокрутка и смещение прокрутки остановлено, поэтому, возможно, мы сможем как-то объединить код и использовать его: 

public function enqueue_js() {
    $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    wp_enqueue_script( 'hash_link_scroll_offset', self::$url . "assets/js/hash-link-scroll-offset$min.js", array( 'jquery' ), self::VERSION, true );
    wp_localize_script( 'hash_link_scroll_offset', 'hlso_offset', array( 'offset' => get_option( 'hash_link_scroll_offset', 0 ) ) );
}
0 голосов
/ 05 августа 2020

И где мне вводить код JS? И будет ли это работать, если я изменил код на что-то вроде этого:, а затем вместо кода в функциях. php Я оставлю пункт меню #top? 

const toTop = document.getElementById('toTop');

toTop.onclick = () => {
window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});
}
<div id="top"></div>
0 голосов
/ 04 августа 2020

Вы можете попробовать использовать javascript что-то вроде этого. можете обратиться к этому документу для этого 

const toTop = document.getElementById('toTop');

toTop.onclick = () => {
window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});
}
<button id="toTop">Go To Top</button>

Чтобы включить этот код в wordpress, вы можете добавить его в свои функции. php

add_action('wp_footer', 'add_go_to_top');
function add_go_to_top()
{
   ?>
<script>
window.onload = () => {
    // add above javascript here
}
</script>
   <?php
}
...