Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Link para o topo da página

Tenho uma widget de rodapé de um site e nesse rodapé tem links para páginas institucionais, porém quando clicadas, o usuário é de fato direcionado para a página que deveria, mas a página fica "estática", no rodapé, ao invés de ir para o topo.

Trocando o databind por href resolve o problema mas preciso que seja databind mesmo.

<div class="row">
  <footer class="footer">
    <div class="footer-content footer-btm">
      <div class="container">
        <div class="row">
          <article class="footer-item footer-item-attendance col-md-4">
            <span class="i-notext i i-headset-red-blue"></span>
            <div class="footer-item-content">
              <header class="footer-item-header">
                <h4 class="footer-item-text">Horário de atendimento:</h4>
              </header>
              <p class="footer-item-text">Segunda a sexta - das 8h às 18h</p>
              <p class="footer-item-text">Sábados - das 8h às 13h</p>
            </div>
          </article>
          <article class="footer-item footer-item-utilities col-md-8">
            <header class="footer-item-header site-title">
              <h4 class="footer-item-header-title">Links úteis:</h4>
            </header>
            <ul class="list">
              <li class="list-item list-item-block"><a class="list-item-link" data-bind="ccLink: 'credenciamento'">Seja
                  uma
                  oficina credenciada</a></li>
              <li class="list-item divider"><a class="list-item-link" data-bind="ccLink: 'lojas'">Endereço de
                  montagem</a></li>
              <li class="list-item divider"><a class="list-item-link" data-bind="ccLink: 'lojas'">Lojas credenciadas</a>
              </li>
              <li class="list-item list-item-block"><a class="list-item-link"
                  data-bind="ccLink: 'trocas-devolucoes'">Políticas
                  de Trocas e devoluções</a></li>
              <li class="list-item divider"><a class="list-item-link" data-bind="ccLink: 'garantia'">Garantia</a></li>
              <li class="list-item divider"><a class="list-item-link" data-bind="ccLink: 'quem-somos'">Quem Somos</a>
              </li></br>
              <li class="list-item list-item-block"><a class="list-item-link" data-bind="ccLink: 'como-comprar'">Como
                  comprar</a></li>
              <li class="list-item divider"><a class="list-item-link" data-bind="ccLink: 'politica-entrega'">Políticas
                  de frete</a>
              </li>
            </ul>
          </article>
        </div>
        <div class="row">
          <article class="footer-item footer-item-payments col-md-4">
            <header class="footer-item-header">
              <h4 class="footer-item-header-title">Meios de pagamento</h4>
            </header>
            <img data-bind="attr: {src:'/file/general/meios-pagamentos.png'}" alt="" title="" />
          </article>
          <article class="footer-item footer-item-secure col-md-4">
            <header class="footer-item-header">
              <h4 class="footer-item-header-title">Site 100% seguro</h4>
            </header>
            <ul class="selos">
              <li class="selos-itens">
                <img src="https://letsencrypt.org/images/le-logo-standard.svg" alt="Let's Encrypt"
                  title="Let's Encrypt">
              </li>
              <li class="selos-itens">
                <a id="seloEbit" href="http://www.ebit.com.br/kd-pneus/selo" target="_blank"
                  title="Avaliado pelos consumidores" value="1"
                  style="display: block; overflow: hidden; position: relative;"><img
                    src="https://newimgebit-a.akamaihd.net/ebitBR/selo/img_5583.png" style="border: 0px;"></a>
                <script type="text/javascript" id="getSelo"
                  src="https://imgs.ebit.com.br/ebitBR/selo-ebit/js/getSelo.js?5583"></script>
              </li>
              <li class="selos-itens">
                <a href="http://lojaconfiavel.yourviews.com.br/kdpneus?utm_source=kdpneus" target="_blank">
                  <img src="https://service.yourviews.com.br/Image/9ccb74da-196b-4c5b-aff5-41e5d2f57f40/Footer.jpg"
                    title="Loja Confiável" alt="Loja Confiável"></a>
              </li>
              <li class="selos-itens">
                <a href="http://www.abcomm.com.br/" target="_blank"><img
                    src="https://kdpneus-static.online.pro.br/images/abcomm-v2.png" border="0"></a>
              </li>
              <li class="selos-itens">
                <a href="https://selo.clearsale.com.br/Loja/ExibirDetalhesLoja/

No caso são os links "Seja uma oficina credenciada" "Endereço de montagem" "Lojas credenciadas" "Política de Trocas e devoluções" "Garantia" "Quem Somos" "Como Comprar" "Políticas de frete"

Desde já agradeço muito ajuda de vocês :)

3 respostas

Renan, boa tarde!

Visto que, eles de fato são links, e ao fazer uso da tag <a> é obrigatório o uso desse atributo, por qual motivo especifico é necessário usar o data-bind?

Olá Felipe, boa tarde! Obrigado pela resposta rápida!

Porque na Oracle Commerce Cloud fazer uso de href não é uma boa prática levando em conta o conceito da aplicação da SPA... Análise de performance...

Mas pelo que eu tenho pesquisado não encontro soluções viáveis mesmo não fazer uso da href. Não sem uma gambiarra. Se não encontrar soluções viáveis será assim mesmo.

O problema na real é renderizar a página inteira.

solução!

Renan, boa tarde!

Após fazer um teste escrevi um código que você pode inserir nessas páginas que serão redirecionadas.

document.addEventListener("DOMContentLoaded", function() {
  const html = document.querySelector('html');
  html.scrollTop = '0px';
});

Nele eu pego os elementos após carregados e vou para o começo da tela.

Espero ter ajudado e bons estudos!