光滑锚与WordPress的可视化编辑器滚动的onclick JavaScript操作按钮功能

我使用Wordpress的Visual Composer和想一个按钮，有一个平稳向下滚动到同一页面上的特定部分。光滑锚与WordPress的可视化编辑器滚动的onclick JavaScript操作按钮功能

我已经探索过标准按钮元素的“插入内嵌onclick javascript动作”，其中包含锚ID和来自其他许多类似代码Q &因为，但没有运气。有没有人有专门针对Wordpress Visual Composer的答案？

（下面是我怎样努力实现@Frits建议截图。）

Button href

Raw JS block

来源

2017-04-13 John Blignaut

请附上您已经尝试在你的问题来实现代码。 – Joe

谢谢乔。我是新的stackoverflow /编码，所以你的技巧是赞赏。 –

今后，将您当前的尝试是一个好主意，因为这将帮助我们调整你的代码。你已经清楚地尝试了一些东西，他们显然没有工作（否则你不会来这里） - 向我们展示你的尝试，我们可以帮助你解决当前的问题！

不管怎么说，在实际的代码。

看到，因为你缺少了一点信息，我将不得不作出一些假设。

我会假设你有一个按钮，看起来像这样：

<a href="#my-visual-composer-row-id" class="my-link">Click here to scroll down</a>

，我会假设你已经给你的视觉作曲家行my-visual-composer-row-id的ID（你可以做到这一点在实际行本身的编辑选项下）

如果您使用jQuery可以，那么您可以在某个地方（最好是页面底部）的RAW JavaScript块中实现以下内容，重新制作你自己的主题，你可以将它添加到你的.js文件中。

jQuery(document).ready(function($){ 
    $('.my-link a').click(function(e){ 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = jQuery(this.hash); 
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       jQuery('html, body').animate({ 
        scrollTop: Math.ceil(target.offset().top) 
       }, 1000); 
      return false; 
      } 
     } 
    }); 
});

这已被改编自可发现here的CSS-技巧平滑滚动溶液。

来源

2017-04-13 15:01:18 Frits

你做了伟大的工作与你的假设，我已经实现的一切，以及我知道（我有点新秀）。但仍然没有运气。以下是www.evermanapparel.co.za网址。我还添加了关于我如何实施您的建议的问题截图。 –

@JohnBlignaut所以你遇到的问题是类名'my-link' - 我认为你会给'a'标签一个类'my-link'，但视觉作曲家将你的自定义类添加到包装div，这使'$（'a.my-link'）...'没有意义。但是，将其调整为'$（'。my-link a'）....'修复了您网站上的问题:)我已在我的答案中编辑了代码块，因此请删除旧块，然后重新添加代码块中的新代码:) – Frits

再次感谢。试过了，但仍然没有快乐......任何其他想法？ –

光滑锚与WordPress的可视化编辑器滚动的onclick JavaScript操作按钮功能

回答

相关问题