efacil

gistfile1.html

Código para criar a âncora:

<div class="trustvox-link">
  <a id="trustvox-a" href="#trustvox-reviews">
    <img src="/arquivos/icon-ancora-trustvox-verde.png" />
    <span>Pergunte e veja opiniões de quem já comprou</span>
  </a>
</div>

gistfile2.js

Script para gerar o widget + efeito de rolagem lenta para click da âncora + customização:

<script type="text/javascript">
  var _trustvox = _trustvox || [];
  _trustvox.push(['_storeId', '545']);

  _trustvox.push(['_productId',  "XXXX"]);
  _trustvox.push(['_productName',"XXXX"]);
  _trustvox.push(['_productPhotos', ["XXXX", "XXXX"]]);

  _trustvox.push(['_css', ["//trustvox.production.widget.s3-sa-east-1.amazonaws.com/assets/stylesheets/efacil.css"]]);

(function() {
    var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
    tv.charset = "UTF-8";
    tv.src = '//trustvox-production-assets.s3.amazonaws.com/assets/trustvox.1.min.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
  })();

  $('#trustvox-a').click(function(){
    $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
  });

</script>

gistfile3.css

Estilo (css) para html da âncora
.trustvox-link {
  text-align: right;
  margin: 10px 0px 0px;
}

.trustvox-link a {
  font-size: 12px;
  display: block;
  text-decoration: none;
}
.trustvox-link img {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.trustvox-link span {
  background-color: #F5F5F5;
  border-bottom: 1px solid #d2d2d2;
  color: #006E24;
  position: relative;
  top: -13px;
  padding: 5px 10px 4px 15px;
  margin-left: -10px;
  border-radius: 3px;
}

.trustvox-link a:hover span {background-color: #DEE2E0;}