停止重新加載錨點元素和/或滾動到頂部

Question

當有人單擊#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 Bootstrap。

!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); 

Answer 1

$('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）。

Answer 2

的javascript：無效（0）

我總是建議你，不要使用preventDefault（跨瀏覽器的問題）。 return false也不是那麼依賴。

我在過去有同樣的問題。我訴諸於此，因爲它適用於所有瀏覽器！

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