停止锚定元素重新加载和/或滚动到顶部

Stop anchor element from reloading and/or scrolling to top

本文关键字：滚动 顶部 加载 元素 新加载      更新时间：2023-09-26

当有人单击#collapseOne锚点时，页面会重新加载并滚动到顶部。我需要禁用它。但是，我不能将href更改为其他内容，因为它用于网站的功能。有什么方法可以防止网站滚动到顶部，或者根本防止它重新加载？

  <div class="accordion" id="accordion2">
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1
  </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Anim pariatur cliche...
  </div>
   </div>
 </div>
 <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
    Collapsible Group Item #2
  </a>
 </div>
 </div>

这是JavaScript。这是Twitter引导程序。

!function ($) {
"use strict"; // jshint ;_;

/* COLLAPSE PUBLIC CLASS DEFINITION
 * ================================ */
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options.parent) {
  this.$parent = $(this.options.parent)
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
  var hasWidth = this.$element.hasClass('width')
  return hasWidth ? 'width' : 'height'
}
, show: function () {
  var dimension
    , scroll
    , actives
    , hasData
  if (this.transitioning || this.$element.hasClass('in')) return
  dimension = this.dimension()
  scroll = $.camelCase(['scroll', dimension].join('-'))
  actives = this.$parent && this.$parent.find('> .accordion-group > .in')
  if (actives && actives.length) {
    hasData = actives.data('collapse')
    if (hasData && hasData.transitioning) return
    actives.collapse('hide')
    hasData || actives.data('collapse', null)
  }
  this.$element[dimension](0)
  this.transition('addClass', $.Event('show'), 'shown')
  $.support.transition && this.$element[dimension](this.$element[0][scroll])
 }
, hide: function () {
  var dimension
  if (this.transitioning || !this.$element.hasClass('in')) return
  dimension = this.dimension()
  this.reset(this.$element[dimension]())
  this.transition('removeClass', $.Event('hide'), 'hidden')
  this.$element[dimension](0)
}
, reset: function (size) {
  var dimension = this.dimension()
  this.$element
    .removeClass('collapse')
    [dimension](size || 'auto')
    [0].offsetWidth
  this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
  return this
}
, transition: function (method, startEvent, completeEvent) {
  var that = this
    , complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0
        that.$element.trigger(completeEvent)
      }
  this.$element.trigger(startEvent)
  if (startEvent.isDefaultPrevented()) return
  this.transitioning = 1
  this.$element[method]('in')
  $.support.transition && this.$element.hasClass('collapse') ?
    this.$element.one($.support.transition.end, complete) :
    complete()
}
, toggle: function () {
  this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}

/* COLLAPSE PLUGIN DEFINITION
* ========================== */
var old = $.fn.collapse
$.fn.collapse = function (option) {
return this.each(function () {
  var $this = $(this)
    , data = $this.data('collapse')
    , options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
  if (!data) $this.data('collapse', (data = new Collapse(this, options)))
  if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse

/* COLLAPSE NO CONFLICT
* ==================== */
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}

/* COLLAPSE DATA-API
* ================= */
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
  , target = $this.attr('data-target')
    || e.preventDefault()
    || (href = $this.attr('href')) && href.replace(/.*(?=#[^'s]+$)/, '') //strip for ie7
  , option = $(target).data('collapse') ? 'toggle' : $this.data()
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
$(target).collapse(option)
})
}(window.jQuery);

$('a.accordion-toggle').on('click', function(e) {
    // whatever other code this click event needs to run here...
    e.preventDefault();
}

e是事件对象，调用preventDefault方法会使其停止正常行为（在这种情况下，重新加载页面并重置滚动位置）。您可能需要将其与现有的点击处理代码结合起来才能正常工作（显然您没有提供所有代码）。

return false的工作原理也类似于e.preventDefault()（实际上它只运行e.preventDefault和e.stopPropagation，后者防止点击事件传播到DOM中的父元素）。

javascript:void（0）

我一直建议您不要使用preventDefault（跨浏览器问题）。return false也没有那么依赖。

我过去也遇到过同样的问题。我求助于此，因为它在所有浏览器中都有效！！！

$('#my_herf_id').on('click', function() {
       // code..
    $("#my_herf_id").attr('href','javascript:void(0)');
}
相关文章：